'菜单'

Your Name

2022-06-28 043265de0da38fcc727bcc60d7c88da4c3c3513f

 src/views/system/menu/index.vue

@@ -2,8 +2,16 @@
   <div class="system-menu-container">
      <el-card shadow="hover">
         <div class="system-menu-search mb15">
            <el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
            <el-button size="default" type="primary" class="ml10">
            <el-select size="default" v-model="projectId" placeholder="请选择项目名称" style="max-width: 180px" @change="getMenuList()">
               <el-option
                     v-for="item in projectList"
                     :key="item.key"
                     :value="item.id"
                     :label="item.name"
               >
               </el-option>
            </el-select>
            <el-button size="default" type="primary" class="ml10" @click="getMenuList">
               <el-icon>
                  <ele-Search />
               </el-icon>
@@ -48,7 +56,7 @@
               <template #default="scope">
                  <el-button size="small" text type="primary" @click="onOpenMenuDialog('新增')">新增</el-button>
                  <el-button size="small" text type="primary" @click="onOpenMenuDialog('修改',scope.row)">修改</el-button>
                  <el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
<!--                  <el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>-->
               </template>
            </el-table-column>
         </el-table>
@@ -58,71 +66,81 @@
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
import {useMenuApi} from "/@/api/menu";
import {Session} from "/@/utils/storage";
import pinia from "/@/stores";
import {dynamicRoutes} from "/@/router/route";
   import { ref, toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
   import { RouteRecordRaw } from 'vue-router';
   import { ElMessageBox, ElMessage } from 'element-plus';
   import { storeToRefs } from 'pinia';
   import { useRoutesList } from '/@/stores/routesList';
   import menuDialog from '/@/views/system/menu/component/menuDialog.vue';
   import {useMenuApi} from "/@/api/menu";
   import {Session} from "/@/utils/storage";
   import pinia from "/@/stores";
   import {dynamicRoutes} from "/@/router/route";
   import {useUserInfo} from "/@/stores/userInfo";

export default defineComponent({
   name: 'systemMenu',
   components: { menuDialog },
   setup() {
      const stores = useRoutesList();
      const { routesList } = storeToRefs(stores);
      const menuDialog = ref();
      const state = reactive({
         menuData:[],
      });
      // 获取 vuex 中的路由
      const menuTableData = computed(() => {
         return routesList.value;
      });
      // 打开新增菜单弹窗
      const onOpenMenuDialog = (type: string,value: any) => {
         debugger
         menuDialog.value.openDialog(type,value);
      };
      // 打开编辑菜单弹窗
      // 删除当前行
      const onTabelRowDel = (row: RouteRecordRaw) => {
         ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
         }).then(() => {
            ElMessage.success('删除成功');
         }).catch(() => {});
      };
      const getMenuList = async () => {
         let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
         if(res.data.code === '200'){
            // state.menuData = res.data.data
            const storesRoutesList = useRoutesList(pinia);
            storesRoutesList.setRoutesList(res.data.data);
         }else{
            ElMessage({
               type:'warning',
               message:res.data.msg
            })
         }
      };
      onMounted( () => {
         getMenuList()
      });
      return {
         getMenuList,
         menuDialog,
         onOpenMenuDialog,
         menuTableData,
         onTabelRowDel,
         ...toRefs(state),
      };
   },
});
   export default defineComponent({
      name: 'systemMenu',
      components: { menuDialog },
      setup() {
         const menuDialog = ref();
         const state = reactive({
            projectId:'1',
            menuData:[],
            menuTableData:[],
            projectList:[
               {id:'1',name:'基础数据权限管理系统',key:0},
               {id:'2',name:'双重预防系统',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 menuTableData = computed(() => {
         //    return routesList.value;
         // });
         // 打开新增菜单弹窗
         const onOpenMenuDialog = (type: string,value: any) => {
            menuDialog.value.openDialog(type,value,state.projectList,state.projectId);
         };
         // 打开编辑菜单弹窗
         // 删除当前行
         const onTabelRowDel = (row: RouteRecordRaw) => {
            ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
               confirmButtonText: '删除',
               cancelButtonText: '取消',
               type: 'warning',
            }).then(() => {
               ElMessage.success('删除成功');
            }).catch(() => {});
         };
         const getMenuList = async () => {
            let res = await useMenuApi().getMenuAdmin(state.projectId)
            if(res.data.code === '200'){
               state.menuTableData = res.data.data
               // const storesRoutesList = useRoutesList(pinia);
               // storesRoutesList.setRoutesList(res.data.data);
            }else{
               ElMessage({
                  type:'warning',
                  message:res.data.msg
               })
            }
         };
         onMounted( () => {
            getMenuList()
         });
         return {
            getMenuList,
            menuDialog,
            onOpenMenuDialog,
            onTabelRowDel,
            ...toRefs(state),
         };
      },
   });
</script>