index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="登录地址" prop="ipaddr">
  5. <el-input
  6. v-model="queryParams.ipaddr"
  7. placeholder="请输入登录地址"
  8. clearable
  9. style="width: 240px;"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="用户名称" prop="userName">
  14. <el-input
  15. v-model="queryParams.userName"
  16. placeholder="请输入用户名称"
  17. clearable
  18. style="width: 240px;"
  19. @keyup.enter.native="handleQuery"
  20. />
  21. </el-form-item>
  22. <el-form-item label="状态" prop="status">
  23. <el-select
  24. v-model="queryParams.status"
  25. placeholder="登录状态"
  26. clearable
  27. style="width: 240px"
  28. >
  29. <el-option
  30. v-for="dict in dict.type.sys_common_status"
  31. :key="dict.value"
  32. :label="dict.label"
  33. :value="dict.value"
  34. />
  35. </el-select>
  36. </el-form-item>
  37. <el-form-item label="登录时间">
  38. <el-date-picker
  39. v-model="dateRange"
  40. style="width: 240px"
  41. value-format="yyyy-MM-dd"
  42. type="daterange"
  43. range-separator="-"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. ></el-date-picker>
  47. </el-form-item>
  48. <el-form-item>
  49. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  50. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  51. </el-form-item>
  52. </el-form>
  53. <el-row :gutter="10" class="mb8">
  54. <el-col :span="1.5">
  55. <el-button
  56. type="danger"
  57. plain
  58. icon="el-icon-delete"
  59. size="mini"
  60. :disabled="multiple"
  61. @click="handleDelete"
  62. v-hasPermi="['monitor:logininfor:remove']"
  63. >删除</el-button>
  64. </el-col>
  65. <el-col :span="1.5">
  66. <el-button
  67. type="danger"
  68. plain
  69. icon="el-icon-delete"
  70. size="mini"
  71. @click="handleClean"
  72. v-hasPermi="['monitor:logininfor:remove']"
  73. >清空</el-button>
  74. </el-col>
  75. <el-col :span="1.5">
  76. <el-button
  77. type="primary"
  78. plain
  79. icon="el-icon-unlock"
  80. size="mini"
  81. :disabled="single"
  82. @click="handleUnlock"
  83. v-hasPermi="['monitor:logininfor:unlock']"
  84. >解锁</el-button>
  85. </el-col>
  86. <el-col :span="1.5">
  87. <el-button
  88. type="warning"
  89. plain
  90. icon="el-icon-download"
  91. size="mini"
  92. @click="handleExport"
  93. v-hasPermi="['monitor:logininfor:export']"
  94. >导出</el-button>
  95. </el-col>
  96. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  97. </el-row>
  98. <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
  99. <el-table-column type="selection" width="55" align="center" />
  100. <el-table-column label="访问编号" align="center" prop="infoId" />
  101. <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
  102. <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
  103. <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
  104. <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
  105. <el-table-column label="操作系统" align="center" prop="os" />
  106. <el-table-column label="登录状态" align="center" prop="status">
  107. <template slot-scope="scope">
  108. <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
  109. </template>
  110. </el-table-column>
  111. <el-table-column label="操作信息" align="center" prop="msg" />
  112. <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
  113. <template slot-scope="scope">
  114. <span>{{ parseTime(scope.row.loginTime) }}</span>
  115. </template>
  116. </el-table-column>
  117. </el-table>
  118. <pagination
  119. v-show="total>0"
  120. :total="total"
  121. :page.sync="queryParams.pageNum"
  122. :limit.sync="queryParams.pageSize"
  123. @pagination="getList"
  124. />
  125. </div>
  126. </template>
  127. <script>
  128. import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
  129. export default {
  130. name: "Logininfor",
  131. dicts: ['sys_common_status'],
  132. data() {
  133. return {
  134. // 遮罩层
  135. loading: true,
  136. // 选中数组
  137. ids: [],
  138. // 非单个禁用
  139. single: true,
  140. // 非多个禁用
  141. multiple: true,
  142. // 选择用户名
  143. selectName: "",
  144. // 显示搜索条件
  145. showSearch: true,
  146. // 总条数
  147. total: 0,
  148. // 表格数据
  149. list: [],
  150. // 日期范围
  151. dateRange: [],
  152. // 默认排序
  153. defaultSort: {prop: 'loginTime', order: 'descending'},
  154. // 查询参数
  155. queryParams: {
  156. pageNum: 1,
  157. pageSize: 10,
  158. ipaddr: undefined,
  159. userName: undefined,
  160. status: undefined
  161. }
  162. };
  163. },
  164. created() {
  165. this.getList();
  166. },
  167. methods: {
  168. /** 查询登录日志列表 */
  169. getList() {
  170. this.loading = true;
  171. list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
  172. this.list = response.rows;
  173. this.total = response.total;
  174. this.loading = false;
  175. }
  176. );
  177. },
  178. /** 搜索按钮操作 */
  179. handleQuery() {
  180. this.queryParams.pageNum = 1;
  181. this.getList();
  182. },
  183. /** 重置按钮操作 */
  184. resetQuery() {
  185. this.dateRange = [];
  186. this.resetForm("queryForm");
  187. this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
  188. this.handleQuery();
  189. },
  190. /** 多选框选中数据 */
  191. handleSelectionChange(selection) {
  192. this.ids = selection.map(item => item.infoId)
  193. this.single = selection.length!=1
  194. this.multiple = !selection.length
  195. this.selectName = selection.map(item => item.userName);
  196. },
  197. /** 排序触发事件 */
  198. handleSortChange(column, prop, order) {
  199. this.queryParams.orderByColumn = column.prop;
  200. this.queryParams.isAsc = column.order;
  201. this.getList();
  202. },
  203. /** 删除按钮操作 */
  204. handleDelete(row) {
  205. const infoIds = row.infoId || this.ids;
  206. this.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function() {
  207. return delLogininfor(infoIds);
  208. }).then(() => {
  209. this.getList();
  210. this.$modal.msgSuccess("删除成功");
  211. }).catch(() => {});
  212. },
  213. /** 清空按钮操作 */
  214. handleClean() {
  215. this.$modal.confirm('是否确认清空所有登录日志数据项?').then(function() {
  216. return cleanLogininfor();
  217. }).then(() => {
  218. this.getList();
  219. this.$modal.msgSuccess("清空成功");
  220. }).catch(() => {});
  221. },
  222. /** 解锁按钮操作 */
  223. handleUnlock() {
  224. const username = this.selectName;
  225. this.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function() {
  226. return unlockLogininfor(username);
  227. }).then(() => {
  228. this.$modal.msgSuccess("用户" + username + "解锁成功");
  229. }).catch(() => {});
  230. },
  231. /** 导出按钮操作 */
  232. handleExport() {
  233. this.download('monitor/logininfor/export', {
  234. ...this.queryParams
  235. }, `logininfor_${new Date().getTime()}.xlsx`)
  236. }
  237. }
  238. };
  239. </script>