拉黑用户，用户日志

CODE/smart-community/app-api/src/main/java/com/community/huiju/service/ITaUserService.java

@@ -21,7 +21,7 @@ public interface ITaUserService {
      * @param user
      */
     default void checkVerifyStatusUser(TaUser user) {
-        if (Constant.INVALID_VERIFY_STATUS.equals(user.getVerifyStatus())) {
+        if (Constant.BLACKLIST_STATUS.equals(user.getStatus())) {
             throw new WisdomException("关联账户违反社区规定，无法使用");
         }
     }

CODE/smart-community/community-common/src/main/java/com/community/commom/constant/Constant.java

@@ -204,4 +204,9 @@ public class Constant {
      * 认证作废
      */
     public static final String INVALID_VERIFY_STATUS = "3";
+
+    /**
+     * 人员状态  拉黑 (运营端操作 APP端的用户)
+     */
+    public static final String BLACKLIST_STATUS = "2";
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/controller/TaUserController.java

@@ -0,0 +1,58 @@
+package com.community.huiju.controller;
+
+import com.community.commom.mode.ResponseBean;
+import com.community.huiju.common.base.BaseController;
+import com.community.huiju.service.ITaUserService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiImplicitParam;
+import io.swagger.annotations.ApiImplicitParams;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.cloud.context.config.annotation.RefreshScope;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+/**
+ * 移动端 用户
+ */
+@RestController
+@RequestMapping("/")
+@RefreshScope
+@Api(value = "移动用户API",description = "移动用户API")
+public class TaUserController  extends BaseController {
+
+    @Autowired
+    private ITaUserService iTaUserService;
+
+    @ApiOperation("查询所有用户")
+    @ApiImplicitParams({
+            @ApiImplicitParam(paramType = "query", dataTypeClass = String.class, name = "userName", value = "用户名"),
+            @ApiImplicitParam(paramType = "query", dataTypeClass = String.class, name = "loginName", value = "手机号"),
+            @ApiImplicitParam(paramType = "query", dataTypeClass = String.class, name = "idCard", value = "身份证"),
+            @ApiImplicitParam(paramType = "query", dataTypeClass = Integer.class, name = "pageNum", value = "当前页"),
+            @ApiImplicitParam(paramType = "query", dataTypeClass = Integer.class, name = "pageSize", value = "一页多少行"),
+    })
+    @RequestMapping(value = "/ta/user/getAll", method = RequestMethod.GET)
+    public ResponseBean getAll(@RequestParam(value = "userName", required = false) String userName,
+                               @RequestParam(value = "loginName", required = false)String loginName,
+                               @RequestParam(value = "idCard", required = false)String idCard,
+                               @RequestParam(value = "pageNum", defaultValue = "1")Integer pageNum,
+                               @RequestParam(value = "pageSize", defaultValue = "10")Integer pageSize) {
+        ResponseBean responseBean = new ResponseBean();
+        responseBean = iTaUserService.getAll(userName, loginName, idCard, pageNum, pageSize);
+        return responseBean;
+    }
+
+    @ApiOperation("拉黑用户")
+    @ApiImplicitParams({
+            @ApiImplicitParam(paramType = "body", dataTypeClass = String.class, name = "ids", value = "id集合"),
+    })
+    @RequestMapping(value = "/ta/user/blacklist", method = RequestMethod.PUT)
+    public ResponseBean blacklistTaUser(@RequestBody List<Integer> ids) {
+        ResponseBean responseBean = new ResponseBean();
+        responseBean = iTaUserService.blacklistTaUser(ids);
+        return responseBean;
+    }
+
+}

CODE/smart-community/operate-api/src/main/java/com/community/huiju/dao/TaUserMapper.java

@@ -3,6 +3,8 @@ package com.community.huiju.dao;
 import com.community.huiju.model.TaUser;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.ResultMap;
+import org.apache.ibatis.annotations.Select;
 
 import java.util.List;
 import java.util.Map;
@@ -82,4 +84,10 @@ public interface TaUserMapper {
      * @return
      */
     Integer getOwnerCount();
+
+    /**
+     * 查询所有用户列表
+     * @return
+     */
+    List<TaUser> selectAll(String userName, String loginName, String idCard);
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/model/TaUser.java

@@ -39,6 +39,13 @@ public class TaUser {
 
     private Date updateDate;
 
+    // 身份证
+    private String idCard;
+
+    private String openid;
+
+    private String nickname;
+
     /**
      * 海康人员编号
      */
@@ -250,4 +257,28 @@ public class TaUser {
     public void setHkPersonNo(Long hkPersonNo) {
         this.hkPersonNo = hkPersonNo;
     }
+
+    public String getIdCard() {
+        return idCard;
+    }
+
+    public void setIdCard(String idCard) {
+        this.idCard = idCard;
+    }
+
+    public String getOpenid() {
+        return openid;
+    }
+
+    public void setOpenid(String openid) {
+        this.openid = openid;
+    }
+
+    public String getNickname() {
+        return nickname;
+    }
+
+    public void setNickname(String nickname) {
+        this.nickname = nickname;
+    }
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/ITaUserService.java

@@ -2,6 +2,8 @@ package com.community.huiju.service;
 
 import com.community.commom.mode.ResponseBean;
 
+import java.util.List;
+
 public interface ITaUserService {
 
     /**
@@ -12,4 +14,22 @@ public interface ITaUserService {
      */
     ResponseBean getByUserTypeCount();
 
+    /**
+     * 查询所有的 用户
+     * @param userName
+     * @param loginName
+     * @param idCard
+     * @param pageNum
+     * @param pageSize
+     * @return
+     */
+    ResponseBean getAll(String userName, String loginName, String idCard, Integer pageNum, Integer pageSize);
+
+    /**
+     * 批量拉黑用户
+     * @param ids
+     * @return
+     */
+    ResponseBean blacklistTaUser(List<Integer> ids);
+
 }

CODE/smart-community/operate-api/src/main/java/com/community/huiju/service/impl/TaUserServiceImpl.java

@@ -2,11 +2,16 @@ package com.community.huiju.service.impl;
 
 import com.community.commom.mode.ResponseBean;
 import com.community.huiju.dao.TaUserMapper;
+import com.community.huiju.exception.WisdomException;
+import com.community.huiju.model.TaUser;
 import com.community.huiju.service.ITaUserService;
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import com.google.common.collect.Lists;
 import com.google.common.collect.Maps;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.util.List;
 import java.util.Map;
@@ -47,4 +52,37 @@ public class TaUserServiceImpl implements ITaUserService {
         return responseBean;
     }
 
+    @Override
+    public ResponseBean getAll(String userName, String loginName, String idCard, Integer pageNum, Integer pageSize) {
+        ResponseBean responseBean = new ResponseBean();
+
+        Page<TaUser> page = PageHelper.startPage(pageNum, pageSize);
+        List<TaUser> userList = taUserMapper.selectAll(userName, loginName, idCard);
+
+        Map<String, Object> map = Maps.newHashMap();
+        map.put("item", userList);
+        map.put("total", page.getTotal());
+        map.put("pageNum", page.getPageNum());
+        map.put("pageSize", page.getPageSize());
+        responseBean.addSuccess(map);
+        return responseBean;
+    }
+
+    @Override
+    @Transactional(rollbackFor = Exception.class)
+    public ResponseBean blacklistTaUser(List<Integer> ids) {
+        ResponseBean responseBean = new ResponseBean();
+
+        ids.forEach(e -> {
+            TaUser user = taUserMapper.selectByPrimaryKey(e);
+            if (null == user) {
+                throw new WisdomException("用户不存在");
+            }
+            user.setStatus("2");
+            taUserMapper.updateByPrimaryKeySelective(user);
+        });
+
+        responseBean.addSuccess("操作成功");
+        return responseBean;
+    }
 }

CODE/smart-community/operate-api/src/main/resources/mapper/TaUserMapper.xml

@@ -24,11 +24,14 @@
     <result column="hk_user_id" property="hkUserId" jdbcType="INTEGER" />
     <result column="hk_card_no" property="hkCardNo" jdbcType="VARCHAR" />
     <result column="face_status" property="faceStatus" jdbcType="CHAR" />
+    <result column="id_card" property="idCard" jdbcType="INTEGER"/>
+    <result column="openid" property="openid" jdbcType="VARCHAR" />
+    <result column="nickname" property="nickname" jdbcType="VARCHAR" />
   </resultMap>
   <sql id="Base_Column_List" >
     id, community_id, building_owner_info_id, head_portrait, user_name, login_name, login_password,
     email, gender, status, remark, parent_id, accept_agreement_status, verify_status,
-    create_user, create_date, update_user, update_date, hk_person_no , hk_user_id, hk_card_no, face_status
+    create_user, create_date, update_user, update_date, hk_person_no, hk_user_id, hk_card_no, face_status, id_card, openid, nickname
   </sql>
   <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
     select
@@ -47,7 +50,7 @@
       status, remark, parent_id,
       accept_agreement_status, verify_status, create_user,
       create_date, update_user, update_date, hk_person_no,
-      hk_user_id, hk_card_no, face_status
+      hk_user_id, hk_card_no, face_status, id_card, openid, nickname
       )
     values (#{id,jdbcType=INTEGER}, #{communityId,jdbcType=INTEGER}, #{buildingOwnerInfoId,jdbcType=INTEGER},
       #{headPortrait,jdbcType=VARCHAR}, #{userName,jdbcType=VARCHAR}, #{loginName,jdbcType=VARCHAR},
@@ -55,7 +58,8 @@
       #{status,jdbcType=CHAR}, #{remark,jdbcType=VARCHAR}, #{parentId,jdbcType=INTEGER},
       #{acceptAgreementStatus,jdbcType=CHAR}, #{verifyStatus,jdbcType=CHAR}, #{createUser,jdbcType=INTEGER},
       #{createDate,jdbcType=TIMESTAMP}, #{updateUser,jdbcType=INTEGER}, #{updateDate,jdbcType=TIMESTAMP},
-      #{hkPersonNo,jdbcType=BIGINT}, #{hkUserId,jdbcType=INTEGER}, #{hkCardNo,jdbcType=VARCHAR}, #{faceStatus,jdbcType=CHAR}
+      #{hkPersonNo,jdbcType=BIGINT}, #{hkUserId,jdbcType=INTEGER}, #{hkCardNo,jdbcType=VARCHAR}, #{faceStatus,jdbcType=CHAR},
+      #{idCard,jdbcType=VARCHAR}, #{openid,jdbcType=VARCHAR}, #{nickname,jdbcType=VARCHAR},
       )
   </insert>
   <insert id="insertSelective" parameterType="com.community.huiju.model.TaUser" useGeneratedKeys="true" keyProperty="id" >
@@ -127,6 +131,15 @@
       <if test="faceStatus != null" >
         face_status,
       </if>
+      <if test="idCard != null">
+        id_card,
+      </if>
+      <if test="openid != null" >
+        openid,
+      </if>
+      <if test="nickname != null" >
+        nickname,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides="," >
       <if test="id != null" >
@@ -195,6 +208,15 @@
       <if test="faceStatus != null" >
         #{faceStatus,jdbcType=CHAR},
       </if>
+      <if test="idCard != null">
+        #{idCard,jdbcType=VARCHAR},
+      </if>
+      <if test="openid != null" >
+        #{openid,jdbcType=VARCHAR},
+      </if>
+      <if test="nickname != null" >
+        #{nickname,jdbcType=VARCHAR},
+      </if>
     </trim>
   </insert>
   <update id="updateByPrimaryKeySelective" parameterType="com.community.huiju.model.TaUser" >
@@ -263,6 +285,15 @@
       <if test="faceStatus != null" >
         face_status = #{faceStatus,jdbcType=CHAR},
       </if>
+      <if test="idCard != null">
+        id_card = #{idCard,jdbcType=VARCHAR},
+      </if>
+      <if test="openid != null" >
+        openid = #{openid,jdbcType=VARCHAR},
+      </if>
+      <if test="nickname != null" >
+        nickname = #{nickname,jdbcType=VARCHAR},
+      </if>
     </set>
     where id = #{id,jdbcType=INTEGER}
   </update>
@@ -288,7 +319,10 @@
       hk_person_no = #{hkPersonNo,jdbcType=BIGINT},
       hk_user_id = #{hkUserId,jdbcType=INTEGER},
       hk_card_no = #{hkCardNo,jdbcType=VARCHAR},
-      face_status = #{faceStatus,jdbcType=CHAR}
+      face_status = #{faceStatus,jdbcType=CHAR},
+      id_card = #{idCard,jdbcType=VARCHAR},
+      openid = #{openid,jdbcType=VARCHAR},
+      nickname = #{nickname,jdbcType=VARCHAR}
     where id = #{id,jdbcType=INTEGER}
   </update>
 
@@ -357,4 +391,24 @@
     INNER JOIN ta_sys_user_role tsur on tu.id = tsur.user_id where tsur.role_id != 2
   </select>
 
+  <select id="selectAll" resultMap="BaseResultMap" >
+    select
+    <include refid="Base_Column_List"/>
+    from ta_user
+    <where>
+      <trim suffixOverrides="or | and">
+        <if test="userName != null and userName != ''" >
+          and user_name like CONCAT('%', #{userName,jdbcType=VARCHAR}, '%')
+        </if>
+        <if test="loginName != null and loginName != ''" >
+          and login_name like CONCAT('%', #{loginName,jdbcType=VARCHAR}, '%')
+        </if>
+        <if test="idCard != null and idCard != ''">
+          and id_card like CONCAT('%', #{idCard,jdbcType=VARCHAR}, '%')
+        </if>
+        and id != -1
+      </trim>
+    </where>
+  </select>
+
 </mapper>

VUECODE/smart-operate-manage/src/api/user.js

@@ -79,3 +79,28 @@ export function upDateStatus(data) {
     }
   })
 }
+
+// 查询所有的 移动端用户
+export function getTaUserAll(data) {
+  return request({
+    url: '/ta/user/getAll',
+    method: 'get',
+    params: {
+      userName: data.userName, // 用户名
+      loginName: data.loginName, // 手机号
+      idCard: data.idCard, // 身份证号
+      pageNum: data.pageNum,
+      pageSize: data.pageSize
+    }
+  })
+}
+
+// 拉黑 移动端用户用户
+export function blacklistUser(data) {
+  return request({
+    url: '/ta/user/blacklist',
+    method: 'put',
+    data
+  })
+}
+

VUECODE/smart-operate-manage/src/router/index.js

@@ -35,6 +35,18 @@ export const constantRouterMap = [
         component: () => import('@/views/community/communityTable'),
         name: 'community',
         meta: { title: '社区列表', icon: 'community' }
+      },
+      {
+        path: '/user/management',
+        component: () => import('@/views/community/user/index'),
+        name: 'user-management',
+        meta: { title: '用户列表', icon: 'user' }
+      },
+      {
+        path: '/user/log',
+        component: () => import('@/views/community/user/log/index'),
+        name: 'user-log',
+        meta: { title: '用户日志', icon: 'user' }
       }
     ]
   },

VUECODE/smart-operate-manage/src/store/modules/user.js

@@ -1,6 +1,6 @@
 import { login, logOut, getInfo, sendCode } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
-import { employeesList, userRoleById, addUser, selectUser, upDate, upDateStatus } from '@/api/user'
+import { employeesList, userRoleById, addUser, selectUser, upDate, upDateStatus, getTaUserAll, blacklistUser } from '@/api/user'
 
 const user = {
   state: {
@@ -161,6 +161,24 @@ const user = {
           reject(error)
         })
       })
+    },
+    GetTaUserAll({ commit }, data) { // 获取所有 移动端用户
+      return new Promise((resolve, reject) => {
+        getTaUserAll(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    BlacklistUser({ commit }, data) { // 拉黑移动端用户
+      return new Promise((resolve, reject) => {
+        blacklistUser(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }

VUECODE/smart-operate-manage/src/views/account/role/edi/index.vue

@@ -59,7 +59,7 @@ export default {
     }
   },
   mounted() {
-    this.ruleForm.id = this.$route.params.id
+    this.ruleForm.id = this.$route.query.id
     // 获取用户数据
     this.getInfo()
   },

VUECODE/smart-operate-manage/src/views/account/role/index.vue

@@ -181,13 +181,13 @@ export default {
         this.$message.error('只能选择一行数据!')
         return
       }
-      this.$router.push({ name: 'role-edi', params: { id: ids[0] }})
+      this.$router.push({ name: 'role-edi', query: { id: ids[0] }})
     },
     addRole() { // 添加角色
       this.$router.push({ name: 'role-add' })
     },
     infoRole(id) { // 查看角色详情
-      this.$router.push({ name: 'role-info', params: { id: id }})
+      this.$router.push({ name: 'role-info', query: { id: id }})
     }
   }
 }

VUECODE/smart-operate-manage/src/views/account/role/info/index.vue

@@ -59,13 +59,13 @@ export default {
     }
   },
   mounted() {
-    this.ruleForm.id = this.$route.params.id
+    this.ruleForm.id = this.$route.query.id
     // 获取用户数据
     this.getInfo()
   },
   methods: {
     submitForm(formName) {
-      this.$router.push({ name: 'role-edi', params: { id: this.ruleForm.id }})
+      this.$router.push({ name: 'role-edi', query: { id: this.ruleForm.id }})
     },
     resetForm() {
       // this.$refs[formName].resetFields()

VUECODE/smart-operate-manage/src/views/community/user/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="root">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="用户姓名">
+        <el-input v-model="formInline.userName" placeholder="用户姓名"/>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="formInline.loginName" placeholder="手机号"/>
+      </el-form-item>
+      <el-form-item label="身份证号">
+        <el-input v-model="formInline.idCard" placeholder="身份证号"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="info" @click="clear">清空</el-button>
+        <el-button type="primary" @click="searchData">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="button-div">
+      <el-button type="warning" @click="blacklistUser">拉黑</el-button>
+    </div>
+    <el-table
+      ref="multipleTable"
+      :data="users"
+      border
+      tooltip-effect="dark"
+      style="width: 100%;margin-top: 20px;"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        align="center"
+        type="selection"
+        width="55"/>
+      <el-table-column
+        align="center"
+        prop="userName"
+        label="姓名"/>
+      <el-table-column
+        align="center"
+        prop="loginName"
+        label="手机号"
+        width="120"/>
+      <el-table-column
+        align="center"
+        prop="idCard"
+        label="身份证号"/>
+      <el-table-column
+        align="center"
+        prop="gender"
+        label="性别">
+        <template slot-scope="scope">{{ scope.row.gender === '1' ? '男' : '女' }}</template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="status"
+        label="账号状态">
+        <template slot-scope="scope">{{ scope.row.status === '2' ? '黑名单' : '正常' }}</template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="createDate"
+        label="注册时间">
+        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="日志数据">
+        <template slot-scope="scope">
+          <el-button type="primary" @click="lookUserLog(scope.row.id)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer-page">
+      <el-pagination
+        :current-page="formInline.pageNum"
+        :page-sizes="[10, 20, 40, 100]"
+        :page-size="formInline.pageSize"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserManagement',
+  data() {
+    return {
+      formInline: {
+        userName: '', // 用户名
+        loginName: '', // 手机号
+        idCard: '', // 身份证号
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0, // 总数
+      users: [], // 用户数据
+      ids: [] // 选中的id 集合
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    clear() { // 清除
+      this.formInline.userName = ''
+      this.formInline.loginName = ''
+      this.formInline.idCard = ''
+      this.formInline.pageNum = 1
+      this.formInline.pageSize = 10
+      this.getData()
+    },
+    handleSelectionChange(val) { // 选中
+      this.ids = []
+      val.map((item, index) => {
+        this.ids.push(item.id)
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    searchData() { // 搜索
+      this.formInline.pageNum = 1
+      this.formInline.pageSize = 10
+      this.getData()
+    },
+    getData() {
+      this.$store.dispatch('GetTaUserAll', this.formInline).then((res) => {
+        const resCode = res.code
+        if (resCode === '0') {
+          const resData = res.data
+          this.users = resData.item
+          this.total = resData.total
+          this.formInline.pageNum = resData.pageNum
+          this.formInline.pageSize = resData.pageSize
+        }
+      }).catch(() => {
+        console.log('GetTaUserAll error')
+      })
+    },
+    formatDate(val) {
+      if (val === null) {
+        return
+      }
+      var value = new Date(val)
+      var year = value.getFullYear()
+      var month = value.getMonth() + 1
+      var day = value.getDate()
+      // var hour = value.getHours()
+      // var minutes = value.getMinutes()
+      // var seconds = value.getSeconds()
+      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+      return year + '-' + month + '-' + day
+    },
+    lookUserLog(id) { // 跳转查看用户日志
+      this.$router.push({ name: 'user-log', query: { id: id }})
+    },
+    blacklistUser() { // 拉黑移动端用户
+      this.$store.dispatch('BlacklistUser', this.ids).then((res) => {
+        const resCode = res.code
+        if (resCode === '1') {
+          this.$message.error(res.message)
+          return
+        }
+        this.$message.success(res.message)
+        this.getData()
+      }).catch(() => {
+        console.log('BlacklistUser error')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form-inline {
+  margin-left: 20px;
+  margin-top: 20px;
+}
+.button-div {
+  margin-left: 20px;
+}
+.footer-page {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

VUECODE/smart-operate-manage/src/views/community/user/log/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="root">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="操作类型">
+        <el-select v-model="formInline.logType" placeholder="操作类型">
+          <el-option label="账号相关操作" value="shanghai"/>
+          <el-option label="话题相关操作" value="beijing"/>
+          <el-option label="工单相关操作" value="beijing"/>
+          <el-option label="费用相关操作" value="beijing"/>
+          <el-option label="其他操作" value="beijing"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="日志关键字">
+        <el-input v-model="formInline.logContext" placeholder="日志关键字"/>
+      </el-form-item>
+      <el-form-item label="日志日期">
+        <el-date-picker
+          v-model="formInline.logDate"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="info">清空</el-button>
+        <el-button type="primary">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table
+      :data="logData"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="date"
+        label="编号"
+        width="180"/>
+      <el-table-column
+        prop="name"
+        label="操作类型"
+        width="180"/>
+      <el-table-column
+        prop="address"
+        label="日志类型"/>
+      <el-table-column
+        prop="address"
+        label="日志时间"/>
+    </el-table>
+
+    <div class="footer-page">
+      <el-pagination
+        :current-page="formInline.pageNum"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="formInline.pageSize"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserLog',
+  data() {
+    return {
+      formInline: {
+        logDate: '',
+        logContext: '',
+        logType: '',
+        pageNum: 0,
+        pageSize: 10
+      },
+      total: 0, // 总数
+      logData: [] // 数据
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form-inline {
+  margin-top: 20px;
+  margin-left: 20px;
+}
+.footer-page {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>