'菜单'

Your Name

2022-06-28 043265de0da38fcc727bcc60d7c88da4c3c3513f

 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>