From a3ff86d0726ce9bdbb7fa7167e01a3037137e7d7 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期三, 10 八月 2022 15:47:52 +0800
Subject: [PATCH] 对接
---
src/views/system/menu/component/menuDialog.vue | 507 +++++++++++++++++++++++++++----------------------------
1 files changed, 251 insertions(+), 256 deletions(-)
diff --git a/src/views/system/menu/component/menuDialog.vue b/src/views/system/menu/component/menuDialog.vue
index 8b2f441..eb7e633 100644
--- a/src/views/system/menu/component/menuDialog.vue
+++ b/src/views/system/menu/component/menuDialog.vue
@@ -1,271 +1,266 @@
<template>
- <div class="system-add-menu-container">
- <el-dialog :title="title" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="80px">
- <el-row :gutter="35">
- <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"
- >
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单名称">
- <el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="路由名称">
- <el-input v-model="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="路由路径">
- <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="重定向">
- <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单图标">
- <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="组件路径">
- <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
- </el-form-item>
- </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.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
- <el-option label="admin" value="admin"></el-option>
- <el-option label="common" value="common"></el-option>
- </el-select>
- </el-form-item>
- </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-option
- v-for="item in projectList"
- :key="item.key"
- :value="item.id"
- :label="item.name"
- >
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="菜单排序">
- <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100"/>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="是否隐藏">
- <el-radio-group v-model="ruleForm.meta.isHide">
- <el-radio :label="true">隐藏</el-radio>
- <el-radio :label="false">不隐藏</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
+ <div class="system-add-menu-container">
+ <el-dialog :title="title" v-model="isShowDialog" width="769px">
+ <el-form :model="ruleForm" size="default" label-width="80px">
+ <el-row :gutter="35">
+ <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"
+ >
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单名称">
+ <el-input v-model.trim="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="路由名称">
+ <el-input v-model.trim="ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="路由路径">
+ <el-input v-model.trim="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="重定向">
+ <el-input v-model.trim="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单图标">
+ <el-input placeholder="请输入菜单图标" v-model.trim="ruleForm.meta.icon" type="all" />
+ <!-- <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />-->
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="组件路径">
+ <el-input v-model.trim="ruleForm.component" placeholder="组件路径" clearable></el-input>
+ </el-form-item>
+ </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.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
+ <el-option v-for="item in roleList" :key="item.roleId" :value="item.roleCode" :label="item.roleName"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="项目名">
+ <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"> </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="菜单排序">
+ <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="是否隐藏">
+ <el-radio-group v-model="ruleForm.meta.isHide">
+ <el-radio :label="true">隐藏</el-radio>
+ <el-radio :label="false">不隐藏</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">取 消</el-button>
+ <el-button type="primary" v-throttle @click="onSubmit" size="default">{{ buttonName }}</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</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 { useMenuApi } from '/@/api/system/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 = {
- 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{
- 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')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }else{
- 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
- })
- }
- }
+ 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: '' // 菜单类型为按钮时，权限标识
+ },
+ roleList: [],
+ 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, roleList: []) => {
+ state.projectList = JSON.parse(JSON.stringify(projectList));
+ state.roleList = roleList;
+ 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 {
+ state.buttonName = '修改';
+ state.title = '修改菜单';
+ state.ruleForm = JSON.parse(JSON.stringify(value));
+ state.ruleForm.projectId = projectId.toString();
+ }
+ 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 {
+ 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() // 刷新菜单，未进行后端接口测试
- };
+ // 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),
- };
- },
+ const handelMenu = async () => {
+ let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
+ state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
+ };
+ // 页面加载时
+ 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