index.vue 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
  4. <el-form-item label="登录地址" prop="userIp">
  5. <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable size="small" @keyup.enter.native="handleQuery"/>
  6. </el-form-item>
  7. <el-form-item label="用户名称" prop="username">
  8. <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable size="small" @keyup.enter.native="handleQuery"/>
  9. </el-form-item>
  10. <el-form-item>
  11. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  12. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  13. </el-form-item>
  14. </el-form>
  15. <el-table v-loading="loading" :data="list" style="width: 100%;">
  16. <el-table-column label="会话编号" align="center" prop="id" width="300" />
  17. <el-table-column label="登录名称" align="center" prop="username" width="100" />
  18. <el-table-column label="部门名称" align="center" prop="deptName" width="100" />
  19. <el-table-column label="登录地址" align="center" prop="userIp" width="100" />
  20. <el-table-column label="userAgent" align="center" prop="userAgent" :show-overflow-tooltip="true" />
  21. <el-table-column label="登录时间" align="center" prop="createTime" width="180">
  22. <template slot-scope="scope">
  23. <span>{{ parseTime(scope.row.createTime) }}</span>
  24. </template>
  25. </el-table-column>
  26. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  27. <template slot-scope="scope">
  28. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)"
  29. v-hasPermi="['system:user-session:delete']">强退</el-button>
  30. </template>
  31. </el-table-column>
  32. </el-table>
  33. <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  34. @pagination="getList"/>
  35. </div>
  36. </template>
  37. <script>
  38. import { list, forceLogout } from "@/api/system/session";
  39. export default {
  40. name: "Online",
  41. data() {
  42. return {
  43. // 遮罩层
  44. loading: true,
  45. // 总条数
  46. total: 0,
  47. // 表格数据
  48. list: [],
  49. // 查询参数
  50. queryParams: {
  51. pageNo: 1,
  52. pageSize: 10,
  53. userIp: undefined,
  54. username: undefined
  55. }
  56. };
  57. },
  58. created() {
  59. this.getList();
  60. },
  61. methods: {
  62. /** 查询登录日志列表 */
  63. getList() {
  64. this.loading = true;
  65. list(this.queryParams).then(response => {
  66. this.list = response.data.list;
  67. this.total = response.data.total;
  68. this.loading = false;
  69. });
  70. },
  71. /** 搜索按钮操作 */
  72. handleQuery() {
  73. this.pageNo = 1;
  74. this.getList();
  75. },
  76. /** 重置按钮操作 */
  77. resetQuery() {
  78. this.resetForm("queryForm");
  79. this.handleQuery();
  80. },
  81. /** 强退按钮操作 */
  82. handleForceLogout(row) {
  83. this.$modal.confirm('是否确认强退名称为"' + row.username + '"的数据项?').then(function() {
  84. return forceLogout(row.id);
  85. }).then(() => {
  86. this.getList();
  87. this.$modal.msgSuccess("强退成功");
  88. }).catch(() => {});
  89. }
  90. }
  91. };
  92. </script>