spring boot+iview 前后端分离架构之组织用户的布局的实现（十八）

悠悠 2021-12-19 02:45 180阅读 0赞

### spring boot 与 iview 前后端分离架构之组织用户的布局的实现（十八） ###

*  公众号
 *  组织用户
 *   *  组织用户布局的实现

# 公众号 #

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

# 组织用户 #

组织用户管理主要是为了实现对系统的组织和用户进行相应的维护，实现组织和用户以及用户和角色之间的相互的关联关系。

## 组织用户布局的实现 ##

打开我们第十七章的工程，在sys目录底下创建一个user目录，用户存放组织和用户的相关的代码，如下所示：  
![在这里插入图片描述][20190702103212854.png]  
组织用户的布局方式和菜单的布局方式是一致的此处就不再进行叙述了，本章已经将增加组织、修改组织、删除组织、新增用户、删除用户和修改用户的前端代码也已经整合进去了，在下一章节直接给大家截图代码所在位置。  
直接在user目录底下创建一个orgList.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="orgDate" @on-select-change="onSelectChange"></Tree>
              </Card>
            </Col>
            <Col span="17" offset="1">
              <Card :title="parentOrgName">
                <div>
                  <div style="display:inline-block;float:left;">
                    <Button type="success" @click="handleUserAdd">+新增用户</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="userTable" @on-sort-change="onSortChange" :columns="columns" :data="userData" :height="tableHeight">
                    <template slot-scope="{ row, index }" slot="action">
                      <div >
                        <Button type="success" @click="handleEditUser(row, index)" size="small">编辑</Button>
                        <Button type="error" @click="handleDeleteUser(row)" 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 {
        getOrgTree,
        deleteOrg
      } from "../../../api/sys/org/org.api"
    
      import {
        queryUserList,
        deleteUser
      } from "../../../api/sys/user/user.api"
    
      export default {
        data() {
          return {
            search: '',
            columns: [
              {
                title: '用户账号',
                key: 'loginAccount',
                sortable: true
              },
              {
                title: '真实名称',
                key: 'nickName',
                sortable: true
              },
              {
                title: '创建时间',
                key: 'crtDate',
                sortable: true,
                render: (h, params) => {
                  return h('div',
                    this.formatDate(new Date(params.row.crtDate), 'yyyy/MM/dd hh:mm:ss')
                  )
                }
              },
              {
                title: '最后登录时间',
                key: 'lastLoginDate',
                sortable: true,
                render: (h, params) => {
                  if(params.row.lastLoginDate!=null){
                    return h('div',
                      this.formatDate(new Date(params.row.lastLoginDate), 'yyyy/MM/dd hh:mm:ss')
                    )
                  }else{
                    return h('div', '')
                  }
    
                }
              },
              {
                title: '操作',
                slot: 'action'
              }
            ],
            userData: [],
            key: '',
            order: '',
            total: 0,
            current: 1,
            pageSize: 10,
            orgDate: [],
            hasChildren: false,
            parentOrgId: 0,
            parentOrgName: '虚拟顶级组织',
            fullPath: '',
            editIndex: -1,
            addOrgShow: false,
            updateOrgShow: false,
            addUserShow: false,
            updateUserShow: false,
            userId:'',
            tableHeight:200
          }
        },
        methods: {
          handleDeleteUser(row) {
            this.$Modal.confirm({
              title: '删除用户',
              content: '<p>是否删除当前用户</p>',
              onOk: () => {
                deleteUser({userId: row.userId}).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    this.handleSearch();
                  } else {
                    this.$Message.warning(res.msg);
                  }
                });
              },
              onCancel: () => {
                this.$Message.info('取消删除请求');
              }
            });
          },
          handleEditUser(row, index) {
            this.userId = row.userId;
            this.updateUserShow = true;
          },
          handleSearch() {
            let current = this.current
            let pageSize = this.pageSize
            let search = this.search
            let orderKey = this.key
            let orderByValue = this.order
            let fullPath = this.fullPath
            const _this = this;
            queryUserList({
              current,
              pageSize,
              search,
              orderKey,
              orderByValue,
              fullPath
            }).then(res => {
              if (res.code == 200) {
                this.$Message.success(res.msg)
                _this.total = res.obj.total
                _this.userData = res.obj.rows
              } else {
                this.$Message.error( res.msg)
              }
            })
          },
          handleUserAdd() {
            this.addUserShow = true
          },
          handleAdd() {
            this.addOrgShow = true
          },
          handleUpdate() {
            if (this.parentOrgId == 0) {
              this.$Message.warning('请选择需要修改的组织架构节点');
              return;
            }
            this.updateOrgShow = true
          },
          handleDelete() {
            if (this.parentOrgId == 0) {
              this.$Message.warning('请选择需要删除的组织架构节点');
              return;
            }
            this.$Modal.confirm({
              title: '删除组织',
              content: '<p>是否删除当前选中的组织</p>',
              onOk: () => {
                deleteOrg({orgId: this.parentOrgId}).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    this.parentOrgId = 0;
                    this.parentOrgName = '虚拟顶级组织';
                    // 删除数据成功同时刷新grid
                    this.initTree();
                  } else {
                    this.$Message.warning(res.msg);
                  }
                });
              },
              onCancel: () => {
                this.$Message.info('取消了删除请求');
              }
            });
          },
          initTree() {
            const _this = this;
            getOrgTree({}).then(res => {
              if (res.code == 200) {
                _this.orgDate = res.obj;
              } else {
                this.$Message.error("加载组织架构菜单节点失败，请与管理员联系！")
              }
            });
          },
          onSelectChange(data) {
            // 如果长度为0说明当前没有任何节点被选中
            if (data.length == 0) {
              this.parentOrgId = 0;
              this.parentOrgName = '虚拟顶级组织';
              this.hasChildren = false;
              this.fullPath = '';
            } else {
              this.parentOrgId = data[0].orgId;
              this.parentOrgName = data[0].title;
              this.fullPath = data[0].fullPath;
              if (data[0].children.length == 0) {
                this.hasChildren = false;
              } else {
                this.hasChildren = true;
              }
            }
          },
          onSortChange(sort) {
            if (sort.order == 'normal') {
              this.order = '';
            } else {
              this.key = sort.key;
              this.order = sort.order;
            }
            this.handleSearch();
          },
          changePage(current) {
            this.current = current;
            this.handleSearch();
          },
          changePageSize(pageSize) {// 改变每页记录的条数
            this.pageSize = pageSize;
            this.handleSearch();
          }
        },
        mounted() {
          // 初始化完成以后加载菜单数据
          this.initTree();
          this.handleSearch();
          this.tableHeight = window.innerHeight - this.$refs.userTable.$el.offsetTop - 335
        },
        watch: {
          parentOrgId() {
            this.handleSearch();
          }
        }
      }
    </script>

接着代开我们的router目录底下的index.js在增加以下的代码段：

,
            {
              path: 'orgList',
              name: 'orgList',
              meta: {
                icon: 'ios-people',
                title: '用户组织',
                code:'system-manage-user',
                requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
              },
              component: resolve => {
                require(['../view/sys/user/orgList.vue'], resolve);
              }
            }

最好打开我们的main.vue页面，增加以下的代码段，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着运行我们的项目，大家会看到如下的页面，则说明我们的组织用户的布局和查询已经实现了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此处我们就完成了本章的代码了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之角色管理增删改的实现（十七）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之组织用户的组织的增删改的实现（十九）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211219/ab3edbf241e24fec8a8ed6836badd0fd.png
[20190702103212854.png]: /images/20211219/b08a84484f794aa79f29f950d7bc24b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211219/386c6165a433457f931ebabb51183ecd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/d0f4e75f91314b42aa537c18dc277612.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/94430245
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94559360