From cffe20b222f298a757e96e2b2e08c8baa3834bb4 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 05 七月 2022 18:06:45 +0800
Subject: [PATCH] 修改页面布局样式
---
src/views/system/menu/component/menuDialog.vue | 348 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 172 insertions(+), 176 deletions(-)
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 61dfd84..0517bac 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -6,12 +6,12 @@
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级菜单">
<el-cascader
- :options="menuData"
- :props="{ checkStrictly: true, value: 'id', label: 'title' }"
- placeholder="请选择上级菜单"
- clearable
- class="w100"
- v-model="ruleForm.menuSuperior"
+ :options="menuData"
+ :props="{ checkStrictly: true, value: 'id', label: 'title' }"
+ placeholder="请选择上级菜单"
+ clearable
+ class="w100"
+ v-model="ruleForm.menuSuperior"
>
</el-cascader>
</el-form-item>
@@ -56,12 +56,12 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="项目名">
- <el-select v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
+ <el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
<el-option
- v-for="item in projectList"
- :key="item.key"
- :value="item.id"
- :label="item.name"
+ v-for="item in projectList"
+ :key="item.key"
+ :value="item.id"
+ :label="item.name"
>
</el-option>
</el-select>
@@ -93,179 +93,175 @@
</template>
<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useRoutesList } from '/@/stores/routesList';
-import { i18n } from '/@/i18n/index';
-import IconSelector from '/@/components/iconSelector/index.vue';
-import { useMenuApi } from '/@/api/menu/index'
-import { ElMessageBox, ElMessage } from 'element-plus';
-import {Session} from "/@/utils/storage";
-// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
+ import { reactive, toRefs, onMounted, defineComponent } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { useRoutesList } from '/@/stores/routesList';
+ import { i18n } from '/@/i18n/index';
+ import IconSelector from '/@/components/iconSelector/index.vue';
+ import { useMenuApi } from '/@/api/menu/index'
+ import { ElMessageBox, ElMessage } from 'element-plus';
+ import {Session} from "/@/utils/storage";
+ // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
-export default defineComponent({
- name: 'systemAddMenu',
- components: { IconSelector },
- setup(props,context) {
- const stores = useRoutesList();
- const { routesList } = storeToRefs(stores);
- const state = reactive({
- isShowDialog: false,
- title:'',
- buttonName:'',
- // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
- ruleForm: {
- projectId:'',
- parentId:0,
- menuSuperior: [], // 上级菜单
- menuType: 'menu', // 菜单类型
- name: '', // 路由名称
- component: '', // 组件路径
- priority: 0, // 菜单排序
- path: '', // 路由路径
- redirect: '', // 路由重定向，有子集 children 时
- meta: {
- title: '', // 菜单名称
- icon: '', // 菜单图标
- isHide: false, // 是否隐藏
- isKeepAlive: true, // 是否缓存
- isAffix: false, // 是否固定
- isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
- isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
- roles: '', // 权限标识，取角色管理
- },
- btnPower: '', // 菜单类型为按钮时，权限标识
- },
- menuData: [], // 上级菜单数据
- projectList:[
- {id:'1',name:'基础数据权限管理系统',key:0},
- {id:'2',name:'系统1',key:1},
- {id:'3',name:'系统2',key:2},
- {id:'4',name:'系统3',key:3},
- {id:'5',name:'系统4',key:4},
- {id:'6',name:'应急管理系统',key:5},
- {id:'7',name:'目标责任管理系统',key:6},
- {id:'8',name:'事故管理系统',key:7},
- {id:'9',name:'设备综合管控系统',key:8},
- ],
- });
- // 获取 vuex 中的路由
- const getMenuList = (routes: any) => {
- const arr: any = [];
- routes.map((val: any) => {
- val['title'] = val.meta.title;
- val['id'] = val.id
- arr.push(val);
- if (val.children) getMenuList(val.children);
- });
- return arr;
- };
- // 打开弹窗
- const openDialog = (type:string,value:any) => {
- state.isShowDialog = true;
- if(type === '新增菜单'){
- state.buttonName = '新增'
- state.title = '新增菜单'
- state.ruleForm = {
+ export default defineComponent({
+ name: 'systemAddMenu',
+ components: { IconSelector },
+ setup(props,context) {
+ const stores = useRoutesList();
+ const { routesList } = storeToRefs(stores);
+ const state = reactive({
+ isShowDialog: false,
+ title:'',
+ buttonName:'',
+ // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
+ ruleForm: {
projectId:'',
parentId:0,
- menuSuperior: [],
- menuType: 'menu',
- name: '',
- component: '',
- priority: 0,
- path: '',
- redirect: '',
+ menuSuperior: [], // 上级菜单
+ menuType: 'menu', // 菜单类型
+ name: '', // 路由名称
+ component: '', // 组件路径
+ priority: 0, // 菜单排序
+ path: '', // 路由路径
+ redirect: '', // 路由重定向，有子集 children 时
meta: {
- title: '',
- icon: '',
- isHide: false,
- isKeepAlive: true,
- isAffix: false,
- isLink: '',
- isIframe: false,
- roles: '',
+ title: '', // 菜单名称
+ icon: '', // 菜单图标
+ isHide: false, // 是否隐藏
+ isKeepAlive: true, // 是否缓存
+ isAffix: false, // 是否固定
+ isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
+ isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
+ roles: [], // 权限标识，取角色管理
},
- btnPower: '',
- }
- }else{
- state.buttonName = '修改'
- state.title = '修改菜单'
- state.ruleForm = JSON.parse(JSON.stringify(value))
- }
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 是否内嵌下拉改变
- // const onSelectIframeChange = () => {
- // if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
- // else state.ruleForm.isLink = false;
- // };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = async () => {
- if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
- let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
- state.ruleForm.parentId = menuId[menuId.length - 1]
- }
- if(state.title === '新增菜单'){
- let res = await useMenuApi().addMenu(state.ruleForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'菜单新增成功',
- duration:2000
- })
- closeDialog();
- context.emit('getMenuList')
+ btnPower: '', // 菜单类型为按钮时，权限标识
+ },
+ menuData: [], // 上级菜单数据
+ projectList:[
+ ],
+ });
+ // 获取 vuex 中的路由
+ const getMenuList = (routes: any) => {
+ const arr: any = [];
+ routes.map((val: any) => {
+ val['title'] = val.meta.title;
+ val['id'] = val.id
+ arr.push(val);
+ if (val.children) getMenuList(val.children);
+ });
+ return arr;
+ };
+ // 打开弹窗
+ const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
+ state.projectList = JSON.parse(JSON.stringify(projectList))
+ state.isShowDialog = true;
+ if(type === '新增'){
+ state.buttonName = '新增'
+ state.title = '新增菜单'
+ state.ruleForm = {
+ projectId:projectId,
+ parentId:0,
+ menuSuperior: [],
+ menuType: 'menu',
+ name: '',
+ component: '',
+ priority: 0,
+ path: '',
+ redirect: '',
+ meta: {
+ title: '',
+ icon: '',
+ isHide: false,
+ isKeepAlive: true,
+ isAffix: false,
+ isLink: '',
+ isIframe: false,
+ roles: [],
+ },
+ btnPower: '',
+ }
}else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
+ state.buttonName = '修改'
+ state.title = '修改菜单'
+ state.ruleForm = JSON.parse(JSON.stringify(value))
+ state.ruleForm.projectId = projectId.toString()
}
- }else{
- let res = await useMenuApi().modMenu(state.ruleForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'菜单修改成功',
- duration:2000
- })
- closeDialog();
- context.emit('getMenuList')
+ handelMenu()
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ state.isShowDialog = false;
+ };
+ // 是否内嵌下拉改变
+ // const onSelectIframeChange = () => {
+ // if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
+ // else state.ruleForm.isLink = false;
+ // };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // 新增
+ const onSubmit = async () => {
+ if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
+ let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
+ state.ruleForm.parentId = menuId[menuId.length - 1]
+ }
+ if(state.title === '新增菜单'){
+ let res = await useMenuApi().addMenu(state.ruleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'菜单新增成功',
+ duration:2000
+ })
+ closeDialog();
+ context.emit('getMenuList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
}else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
+ let res = await useMenuApi().modMenu(state.ruleForm)
+ if(res.data.code === '200'){
+ ElMessage({
+ type:'success',
+ message:'菜单修改成功',
+ duration:2000
+ })
+ closeDialog();
+ context.emit('getMenuList')
+ }else{
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
}
+
+ // closeDialog(); // 关闭弹窗
+ // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
+ };
+
+ const handelMenu = async () => {
+ let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
+ state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
}
-
- // closeDialog(); // 关闭弹窗
- // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
- };
-
- const show = () => {
- console.log(JSON.parse(JSON.stringify(state.ruleForm.menuSuperior)));
- }
- // 页面加载时
- onMounted(async () => {
- let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
- state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
+ // 页面加载时
+ onMounted(async () => {
+ // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
+ // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
+ });
+ return {
+ openDialog,
+ closeDialog,
+ onCancel,
+ onSubmit,
+ handelMenu,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
--
Gitblit v1.9.2