spring boot+iview 前后端分离架构之菜单管理首页的实现（十四）

系统管理员 2021-12-21 07:37 201阅读 0赞

### spring boot 与 iview 前后端分离架构之菜单管理首页的实现（十四） ###

*  公众号
 *  菜单管理
 *   *  菜单管理布局
     *  左侧的菜单栏的效果的实现
     *  右侧列表框的实现

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg14】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 菜单管理 #

以下就是我们实现完成以后的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

## 菜单管理布局 ##

首先我们在sys目录底下创建一个tree目录，接着创建一个treeList.vue文件，代码如下：

<template>
      <div>
        <Card title="菜单管理">
          <Row>
            <Col span="6">
              左侧的菜单栏
            </Col>
            <Col span="17" offset="1">
              右侧的列表框
            </Col>
          </Row>
        </Card>
      </div>
    </template>
    <script>
      export default {
        name: 'treeList'
      }
    </script>

接着我们打开我们的router目录底下的index.js在之前的数据字典的配置后面增加以下的配置：

{
              path: 'treeList',
              name: 'treeList',
              meta: {
                icon: 'md-git-network',
                title: '菜单管理',
                code:'system-manage-tree',
                requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
              },
              component: resolve => {
                require(['../view/sys/tree/treeList.vue'], resolve);
              }
            }

接着打开我们的main.vue修改当前页面的如下部分：  
![在这里插入图片描述][20190627145247963.png]  
修改完成以后代码如下：

<Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    系统管理
                  </template>
                  <MenuItem name="1-1" to="dictList">数据字典</MenuItem>
                  <MenuItem name="1-2" to="treeList">菜单管理</MenuItem>
                  <MenuItem name="1-3">Option 3</MenuItem>
             </Submenu>

到此处我们就完成了菜单管理首页的布局，我们运行我们项目可以看到如下的页面，则说明我们的布局已经完成了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

## 左侧的菜单栏的效果的实现 ##

改造我们的treeList.vue的代码，改造完成以后代码如下：

接着我们再次查看我们的页面，大家会看到如下的页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
到此处我们就完成了左侧菜单栏的加载和几个按钮的事件的绑定，接着我们来实现我们右侧的列表框。

## 右侧列表框的实现 ##

改造我们的treeList.vue的代码，改造完成以后代码如下：

<template>
      <div>
        <Card title="菜单管理">
          <Row>
            <Col span="6">
              <Card style="min-height:300px;height: calc(100vh - 274px);">
                <ButtonGroup>
                  <Button type="success" @click="handleAdd" size="small">增加</Button>
                  <Button type="primary" @click="handleUpdate" size="small">修改</Button>
                  <Button type="error" @click="handleDelete" size="small">删除</Button>
                </ButtonGroup>
                <Tree :data="roleTreeDate" @on-select-change="onSelectChange"></Tree>
              </Card>
            </Col>
            <Col span="17" offset="1">
              <Card :title="parentTreeName">
                <div>
                  <div style="display:inline-block;float:left;">
                    <Button type="success" @click="handleTreeButton">+创建按钮</Button>
                  </div>
                  <div style="display:inline-block;float:right;">
                    <Input v-model="search" suffix="ios-search" placeholder="请输入查询的条件" style="width: auto"
                           :search=true @on-search="handleSearch"/>
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div style="margin-top: 10px;">
                  <Table ref="treeButtonTable" @on-sort-change="onSortChange" :columns="columns" :data="treeButtonData"
                         :height="tableHeight">
                    <template slot-scope="{ row, index }" slot="treeName">
                      <Input type="text" v-model="editTreeName" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeName }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeCode">
                      <Input type="text" v-model="editTreeCode" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeCode }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeState">
                      <span v-if="row.treeState=='1'">可用</span>
                      <span v-else>禁用</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="action">
                      <div v-if="editIndex === index">
                        <Button size="small" type="success" @click="handleUpdateButton(index)">更新
                        </Button>
                        <Button size="small" type="error" @click="editIndex = -1">取消</Button>
                      </div>
                      <div v-else>
                        <Button type="success" @click="handleEditButton(row, index)" size="small">编辑
                        </Button>
                        <Button type="error" @click="handleDeleteButton(row)" size="small">删除</Button>
                        <Button type="primary" v-if="row.treeState=='1'" @click="handleOperate(row,'2')" size="small">
                          冻结
                        </Button>
                        <Button type="info" v-else @click="handleOperate(row,'1')" size="small">解冻
                        </Button>
                      </div>
                    </template>
                  </Table>
                </div>
                <div style="margin-top: 10px;">
                  <Page show-elevator show-sizer show-total :total="total" :current="current"
                        :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
                </div>
              </Card>
            </Col>
          </Row>
        </Card>
      </div>
    </template>
    <script>
      import {
        getTreeList,
        queryTreeButtonList,
        deleteButton,
        operateButton,
        deleteTree
      } from "../../../api/sys/tree/tree.api"
    
      export default {
        name: 'treeList',
        data() {
          return {
            roleTreeDate: [],
            parentTreeName: '顶层节点',
            parentTreeId: 0,
            search: '',
            key: '',
            order: '',
            total: 0,
            current: 1,
            pageSize: 10,
            columns: [
              {
                title: '按钮名称',
                slot: 'treeName',
                key: 'treeName',
                sortable: true
              }, {
    
                title: '按钮编码',
                slot: 'treeCode',
                key: 'treeCode',
                sortable: true
              },
              {
                title: '按钮状态',
                key: 'treeState',
                slot: 'treeState',
                sortable: true
              },
              {
                title: '操作',
                slot: 'action'
              }
            ],
            treeButtonData: [],
            editTreeName: '',
            editTreeCode: '',
            editTreeId: 0,
            editIndex: -1,
            tableHeight: 150
          }
        },
        methods: {
          handleOperate(row, treeState) {
            console.log('操作')
          },
          handleTreeButton() {
            console.log('增加按钮')
          },
          handleDeleteButton(row) {
            console.log('删除按钮')
          },
          handleEditButton(row, index) {
            console.log('编辑按钮')
          },
          handleUpdateButton(index) {
            console.log('更新按钮')
          },
          changePage(current) {
            this.current = current;
            this.handleSearch();
          },
          changePageSize(pageSize) {// 改变每页记录的条数
            this.pageSize = pageSize;
            this.handleSearch();
          },
          onSortChange(sort) {
            if (sort.order == 'normal') {
              this.order = '';
            } else {
              this.key = sort.key;
              this.order = sort.order;
            }
            this.handleSearch();
          },
          handleSearch() {
            console.log('--查询--')
          },
          handleAdd() {
            console.log('增加菜单')
          },
          handleUpdate() {
            console.log('修改菜单')
          },
          handleDelete() {
            console.log('删除菜单')
          },
          onSelectChange(data) {
    
          },
          initTree() {
            const _this = this;
            getTreeList({}).then(res => {
              if (res.code == 200) {
                _this.roleTreeDate = res.obj;
              } else {
                this.$Message.error("加载菜单节点失败，请与管理员联系！")
              }
            });
          }
        },
        mounted() {
          // 初始化完成以后加载菜单数据
          this.initTree();
          this.tableHeight = window.innerHeight - this.$refs.treeButtonTable.$el.offsetTop - 335
        }
      }
    </script>

接着我们再次查看我们的页面，大家会看到如下的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
到此处我们就完成了本章的菜单管理首页的实现了，下一章将接着讲解菜单管理的剩余的部分。  
上一篇文章地址：[spring boot+iview 前后端分离架构之数据字典新增字典的实现（十三）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之菜单管理菜单的增删改的实现（十五）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211221/3b4cdfa903784d0ea9a45acced8a1848.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211221/103da2f4199244dab95e9f9b136bacbc.png
[20190627145247963.png]: /images/20211221/a631c3e16aa240f2b717bff6e2eed55a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211221/f164b3f1808c4851b44aff150e55bf5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211221/086c69af86af4d378540dd74e820ded3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211221/466d2a859d124dd6815bed198f6fd2c8.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/90680478
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/93886404