项目日记(在线办公项目)day2021/03/03

项目日记day0303

一、用户列表的生成

1、编写查询用户列表的sql语句

分析：这里我们需要的是以下几个信息：

• 账户名(account_name)：tbl_account

• 员工姓名(emp_name)：tbl_emp

• 部门(dept_name)：tbl_dept

• 职位(post_name)：tbl_post

• 状态(account_status)：tbl_account

所以需要以上的几个表进行连接，需要进行sql语句的编写：（除了需要查询以上的信息，一般还需要查询账户ID进行使用）

SELECT
            acc.account_id,
            acc.account_name,
            emp.emp_name,
            dept.dept_name,
            post.post_name,
            acc.account_status
        FROM
            tbl_account acc
                INNER JOIN tbl_emp emp ON acc.emp_id = emp.emp_id
                INNER JOIN tbl_post post ON emp.post_id = post.post_id
                INNER JOIN tbl_dept dept ON post.dept_id = dept.dept_id
        WHERE
            account_status != -1

因为账户状态为-1的为离职员工（不可解冻），所以不需要在账户信息页面上显示。

2.编写后端相关代码

我们首先编写账户信息的实体类，这里是根据sql语句查询出来的表进行实体类的编写，为了方便我们辨识，我们起名为账户视图类：

package com.jiazhong.office.model.view;

/**
 * @ClassName: AccountView
 * @Description: TODO 账户视图类
 * @Author: JiaShiXi
 * @Date: 2021/3/3 15:48
 * @Version: 1.0
 **/

public class AccountView {
    private Integer account_id;
    private String account_name;
    private String emp_name;
    private String dept_name;
    private String post_name;
    private Integer account_status;

    public Integer getAccount_id() {
        return account_id;
    }

    public void setAccount_id(Integer account_id) {
        this.account_id = account_id;
    }

    public String getAccount_name() {
        return account_name;
    }

    public void setAccount_name(String account_name) {
        this.account_name = account_name;
    }

    public String getEmp_name() {
        return emp_name;
    }

    public void setEmp_name(String emp_name) {
        this.emp_name = emp_name;
    }

    public String getDept_name() {
        return dept_name;
    }

    public void setDept_name(String dept_name) {
        this.dept_name = dept_name;
    }

    public String getPost_name() {
        return post_name;
    }

    public void setPost_name(String post_name) {
        this.post_name = post_name;
    }

    public Integer getAccount_status() {
        return account_status;
    }

    public void setAccount_status(Integer account_status) {
        this.account_status = account_status;
    }

    @Override
    public String toString() {
        return "AccountView{" +
                "account_id=" + account_id +
                ", account_name='" + account_name + '\'' +
                ", emp_name='" + emp_name + '\'' +
                ", dept_name='" + dept_name + '\'' +
                ", post_name='" + post_name + '\'' +
                ", account_status=" + account_status +
                '}';
    }
}

接着，编写Dao层相关代码。

首先，需要在AccountDao接口中编写相关的方法：

/**
     * 获取全部账户信息列表
     * @return
     */
public List<AccountView> queryAccountList();

新建AccountDao接口所对应的Mapper文件（AccountMapper.xml）,并加入相关的标签，进行查询语句的编写:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jiazhong.office.dao.rbac.AccountDao">

    <select id="queryAccountList" resultType="com.jiazhong.office.model.view.AccountView">
        SELECT
            acc.account_id,
            acc.account_name,
            emp.emp_name,
            dept.dept_name,
            post.post_name,
            acc.account_status
        FROM
            tbl_account acc
                INNER JOIN tbl_emp emp ON acc.emp_id = emp.emp_id
                INNER JOIN tbl_post post ON emp.post_id = post.post_id
                INNER JOIN tbl_dept dept ON post.dept_id = dept.dept_id
        WHERE
            account_status != -1
    </select>

</mapper>

接着，进行service层代码的编码：

新建AccountService接口，编写获取账户视图列表的方法：

package com.jiazhong.office.service.rbac;

import com.jiazhong.office.model.view.AccountView;

import java.util.List;

/**
 * @InterfaceName: AccountService
 * @Description: TODO 账户服务层
 * @Author: JiaShiXi
 * @Date: 2021/3/3 15:54
 * @Version: 1.0
 **/
public interface AccountService {

    /**
     * 获取账户视图列表
     * @return
     */
    public List<AccountView> getAccountList();

}

进行实现类(AccountServiceImpl)的编写：

package com.jiazhong.office.service.rbac.impl;

import com.jiazhong.office.dao.rbac.AccountDao;
import com.jiazhong.office.model.view.AccountView;
import com.jiazhong.office.service.rbac.AccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**
 * @ClassName: AccountServiceImpl
 * @Description: TODO
 * @Author: JiaShiXi
 * @Date: 2021/3/3 15:56
 * @Version: 1.0
 **/

@Service("accountService")
@Transactional
public class AccountServiceImpl implements AccountService {

    @Autowired
    private AccountDao accountDao;

    @Override
    public List<AccountView> getAccountList() {
        return accountDao.queryAccountList();
    }
}

接着，进行controller层的编写（AccountController）：

package com.jiazhong.office.controller.rbac;

import com.jiazhong.office.model.Account;
import com.jiazhong.office.model.view.AccountView;
import com.jiazhong.office.service.rbac.AccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @ClassName: AccountController
 * @Description: TODO 账户控制器
 * @Author: JiaShiXi
 * @Date: 2021/3/3 15:52
 * @Version: 1.0
 **/

@RestController
@RequestMapping("/rabc/account")
public class AccountController {

    @Autowired
    private AccountService accountService;

    @GetMapping("/getAccountList")
    public List<AccountView> getAccountList(){
        return accountService.getAccountList();
    }
}

可以发现，最后controller返回给前端的Json数据为一个AccountView对象的集合，也就是sql语句查询出来表的映射数据。

3、编写前端相关代码

这里我们使用element ui 表格的组件 实现相关的界面设计。

<template>
    <div class="container-user">
        <div class="user-nav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/main/main/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="user-list-table">
            <el-table
                :data="accountList" //绑定表格数据
                border
                style="width: 100%"
                >

                <el-table-column
                    label="序号"
                    type="index"
                    width="50px"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="account_name"
                    label="账户名"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="emp_name"
                    label="员工姓名"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="dept_name"
                    label="部门"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="post_name"
                    label="职位"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="account_status"
                    label="状态"
                    align="center"
                    :formatter="formatterStatus">
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button type="warning" v-show="scope.row.account_status == 0">冻结</el-button>
                        <el-button type="warning" v-show="scope.row.account_status == 2" disabled>冻结</el-button>
                        <el-button type="success" v-show="scope.row.account_status == 1">解冻</el-button>
                        <el-button type="primary">授权</el-button>
                    </template>
               </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            accountList:[],//账户信息列表
        }
    },
    methods:{
        /**获取账户信息列表 */
        getAccountList(){
            this.$axios.get("/rabc/account/getAccountList")
                    .then(response => {
                        this.accountList = response.data;
                    })
                    .catch(err => {
                        alert(err);
                    })
        },
        /**格式化状态列 */
        formatterStatus(row){
            let account_status = row.account_status;
            if(account_status == "0"){
                return <el-tag type="success">正&nbsp;&nbsp;&nbsp;常</el-tag>
            }else if(account_status == "1"){
                return <el-tag type="warning">冻&nbsp;&nbsp;&nbsp;结</el-tag>
            }else if(account_status == "2"){
                return <el-tag type="info">未启用</el-tag>
            }
        }
    },
    mounted(){
        this.getAccountList(); //获取账户信息列表
    }
}
</script>

<style scoped>
    .user-list-table{
        margin-top: 10px;
    }
</style>

这里需要说明的是，如果需要获取行数据进行各种处理，我们可以有两种方法实现：

• 在el-table-column标签内加入一个槽，通过槽来获取行数据

 <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button type="warning" v-show="scope.row.account_status == 0">冻结</el-button>
                        <el-button type="warning" v-show="scope.row.account_status == 2" disabled>冻结</el-button>
                        <el-button type="success" v-show="scope.row.account_status == 1">解冻</el-button>
                        <el-button type="primary">授权</el-button>
                    </template>
</el-table-column>

• el-table-column标签中有一个formatter属性，可以指定该单元格内容格式化的函数。

<el-table-column
    prop="account_status"
    label="状态"
    align="center"
    :formatter="formatterStatus">
</el-table-column>

/**格式化状态列 */
        formatterStatus(row){
            let account_status = row.account_status;
            if(account_status == "0"){
                return <el-tag type="success">正&nbsp;&nbsp;&nbsp;常</el-tag>
            }else if(account_status == "1"){
                return <el-tag type="warning">冻&nbsp;&nbsp;&nbsp;结</el-tag>
            }else if(account_status == "2"){
                return <el-tag type="info">未启用</el-tag>
            }
        }

实现的效果如下图：