lct

Your Name

2022-07-07 fd285d6245ddd54c2eef8237eb878f573d665f94

 src/views/system/menu/component/menuDialog.vue

@@ -1,267 +1,267 @@
<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 @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" @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="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="菜单图标">
                            <input placeholder="请输入菜单图标" v-model="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="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
                                @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" @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 { 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:[
            ],
         });
         // 获取 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{
               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
                  })
               }
            }
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: []
        });
        // 获取 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 {
                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 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),
         };
      },
   });
        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>