VO 查询和多表联查

第一步：创建存储vo的包

第二步：从实体类中提取需要的VO

第三步：编写mapper

第四步：编写xml

第五步： 编写service和impl

service

impl

第六步：加一个VO

第七步：倒转分页编写 Controller

 第八步：加一个实体类

 第九步：编写一个mapper

第十步：编写xml

第十一步：编写service

编写impl

第十二步：到vue编写前端

<template>
  <div>
    <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">去登录</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
    
  <el-form ref="form" :model="userVO" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="部门">
                  <el-select
                    v-model="userVO.departmentId"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in departmentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      clearable
                    >
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px"
                        ><el-tag type="danger" size="mini">{{
                          item.departcount
                        }}</el-tag></span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="用户名">
                  <el-input v-model="userVO.username" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮箱">
                  <el-input v-model="userVO.email" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别">
                  <el-radio-group v-model="userVO.sex">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                    <el-radio :label="''">全部</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="昵称">
                  <el-input v-model="userVO.nickname" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-button type="primary" icon="el-icon-refresh" @click="reset"
                  >重置</el-button
                >
                <el-button type="success" icon="el-icon-search" @click="search"
                  >查询</el-button
                >
                <el-button type="info" icon="el-icon-plus" @click="addUser"
                  >添加</el-button
                >
                <!-- <el-button
                  type="warning"
                  icon="el-icon-download"
                  @click="exportExcel"
                  >导出</el-button
                > -->
              </el-col>
            </el-row>
          </el-form>
       <!-- 表格 -->
        <!--表格内容显示区域-->
        <el-table :data="userList" border max-height="400" style="width: 100%">
          <el-table-column prop="id" label="#" width="50"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="110">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="60">
            <!-- 如何获取循环的对象 useList  双重三元表达式 -->
            <template slot-scope="scope">
              {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="departName"
            sortable
            label="所属部门"
            width="180"
          >
          </el-table-column>
          <el-table-column sortable prop="birth" label="生日" width="180">
          </el-table-column>
          <el-table-column sortable prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="phoneNumber" label="电话" width="150">
          </el-table-column>
          <el-table-column prop="status" label="是否禁用" width="100">
            <!-- scope表示当前表中的一行数据 -->
            <template slot-scope="scope">
              <!-- scope.row表示这一行的对象 -->
              <el-switch
                v-model="scope.row.status"
                active-color="#ff4949"
                inactive-color="#cccccc"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
            ></el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-s-tools"
            ></el-button>
          </el-table-column>
        </el-table>
           <!-- 分页 -->
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1,5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <!-- 父传子 -->
          <!-- <UserAdd :addOrUpdateVisible="addOrUpdateVisible"
          :departmentList="departmentList"
          @changeShow="showAddOrUpdate"></UserAdd> -->
  </el-card>
    </div>
  </template>

<script>
  import {findDepartMentList} from '../../api/department'
  import {findUserList} from '../../api/user'
export default {
  methods: {
    async getUserList() {
    let res=  await findUserList(this.currentPage, this.pageSize,this.userVO);
    this.userList=res.data.userList.records;
        this.total=res.data.userList.total;
  },
  async getDepartmentList() {
    let res=  await findDepartMentList();
    this.departmentList=res.data.deptList;
  }
  ,
    handleSizeChange(val) {
          this.pageSize = val;
          this.getUserList();
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.getUserList();
          console.log(`当前页: ${val}`);
        },
        addUser(){
      
    },
    reset(){
        this.userVO={};
    },
    search(){
      this.getUserList();
    }
  },created(){
    this.getDepartmentList();
    this.getUserList();
  }
  ,data(){
      return {
         userVO:{
            departmentId: "",
          username: "",
          email: "",
          sex: "",
          nickname: "",
          },
          currentPage:1,
          pageSize:5,
          userList:[],
          total:82,
          departmentList: [],
      }
  }

}
</script>

<style>
  .el-breadcrumb {
      margin-bottom: 10px;
    }
    .el-input,
    .el-select {
      width: 210px;
    }
    
    .el-pagination {
      margin-top: 10px;
    }
    .el-table-column{
      height: 20px;
    }
</style>

编写 js