index.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div class="app-container">
  3. <el-form :inline="true" label-width="68px">
  4. <el-form-item label="系统模块">
  5. <el-input
  6. v-model="queryParams.title"
  7. placeholder="请输入系统模块"
  8. clearable
  9. style="width: 240px;"
  10. size="small"
  11. @keyup.enter.native="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item label="操作人员">
  15. <el-input
  16. v-model="queryParams.operName"
  17. placeholder="请输入操作人员"
  18. clearable
  19. style="width: 240px;"
  20. size="small"
  21. @keyup.enter.native="handleQuery"
  22. />
  23. </el-form-item>
  24. <el-form-item label="类型">
  25. <el-select
  26. v-model="queryParams.businessType"
  27. placeholder="操作类型"
  28. clearable
  29. size="small"
  30. style="width: 240px"
  31. >
  32. <el-option
  33. v-for="dict in typeOptions"
  34. :key="dict.dictValue"
  35. :label="dict.dictLabel"
  36. :value="dict.dictValue"
  37. />
  38. </el-select>
  39. </el-form-item>
  40. <el-form-item label="状态">
  41. <el-select
  42. v-model="queryParams.status"
  43. placeholder="操作状态"
  44. clearable
  45. size="small"
  46. style="width: 240px"
  47. >
  48. <el-option
  49. v-for="dict in statusOptions"
  50. :key="dict.dictValue"
  51. :label="dict.dictLabel"
  52. :value="dict.dictValue"
  53. />
  54. </el-select>
  55. </el-form-item>
  56. <el-form-item label="操作时间">
  57. <el-date-picker
  58. v-model="dateRange"
  59. size="small"
  60. style="width: 240px"
  61. value-format="yyyy-MM-dd"
  62. type="daterange"
  63. range-separator="-"
  64. start-placeholder="开始日期"
  65. end-placeholder="结束日期"
  66. ></el-date-picker>
  67. </el-form-item>
  68. <el-form-item>
  69. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  70. </el-form-item>
  71. </el-form>
  72. <el-table v-loading="loading" :data="list" style="width: 100%;">
  73. <el-table-column label="日志编号" align="center" prop="operId" />
  74. <el-table-column label="系统模块" align="center" prop="title" />
  75. <el-table-column label="操作类型" align="center" prop="businessType" :formatter="typeFormat" />
  76. <el-table-column label="请求方式" align="center" prop="requestMethod" />
  77. <el-table-column label="操作人员" align="center" prop="operName" />
  78. <el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
  79. <el-table-column label="操作地点" align="center" prop="operLocation" />
  80. <el-table-column label="操作状态" align="center" prop="status" :formatter="statusFormat" />
  81. <el-table-column label="操作日期" align="center" prop="operTime" width="180">
  82. <template slot-scope="scope">
  83. <span>{{ parseTime(scope.row.operTime) }}</span>
  84. </template>
  85. </el-table-column>
  86. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  87. <template slot-scope="scope">
  88. <el-button
  89. size="mini"
  90. type="text"
  91. icon="el-icon-view"
  92. @click="handleView(scope.row,scope.index)"
  93. v-hasPermi="['monitor:operlog:query']"
  94. >详细</el-button>
  95. </template>
  96. </el-table-column>
  97. </el-table>
  98. <pagination
  99. v-show="total>0"
  100. :total="total"
  101. :page.sync="queryParams.pageNum"
  102. :limit.sync="queryParams.pageSize"
  103. @pagination="getList"
  104. />
  105. <!-- 操作日志详细 -->
  106. <el-dialog title="操作日志详细" :visible.sync="open" width="700px">
  107. <el-form ref="form" :model="form" label-width="100px" size="mini">
  108. <el-row>
  109. <el-col :span="12">
  110. <el-form-item label="操作模块:">{{ form.title }} / 修改</el-form-item>
  111. <el-form-item
  112. label="登录信息:"
  113. >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
  114. </el-col>
  115. <el-col :span="12">
  116. <el-form-item label="请求地址:">{{ form.operUrl }}</el-form-item>
  117. <el-form-item label="请求方式:">{{ form.requestMethod }}</el-form-item>
  118. </el-col>
  119. <el-col :span="24">
  120. <el-form-item label="操作方法:">{{ form.method }}</el-form-item>
  121. </el-col>
  122. <el-col :span="24">
  123. <el-form-item label="请求参数:">{{ form.operParam }}</el-form-item>
  124. </el-col>
  125. <el-col :span="24">
  126. <el-form-item label="返回参数:">{{ form.jsonResult }}</el-form-item>
  127. </el-col>
  128. <el-col :span="12">
  129. <el-form-item label="操作状态:">
  130. <div v-if="form.status === 0">正常</div>
  131. <div v-else-if="form.status === 1">失败</div>
  132. </el-form-item>
  133. </el-col>
  134. <el-col :span="12">
  135. <el-form-item label="操作时间:">{{ parseTime(form.operTime) }}</el-form-item>
  136. </el-col>
  137. <el-col :span="24">
  138. <el-form-item label="异常信息:" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
  139. </el-col>
  140. </el-row>
  141. </el-form>
  142. <div slot="footer" class="dialog-footer">
  143. <el-button @click="open = false">关 闭</el-button>
  144. </div>
  145. </el-dialog>
  146. </div>
  147. </template>
  148. <script>
  149. import { list } from "@/api/monitor/operlog";
  150. export default {
  151. data() {
  152. return {
  153. // 遮罩层
  154. loading: true,
  155. // 总条数
  156. total: 0,
  157. // 表格数据
  158. list: [],
  159. // 是否显示弹出层
  160. open: false,
  161. // 类型数据字典
  162. typeOptions: [],
  163. // 类型数据字典
  164. statusOptions: [],
  165. // 日期范围
  166. dateRange: [],
  167. // 表单参数
  168. form: {},
  169. // 查询参数
  170. queryParams: {
  171. pageNum: 1,
  172. pageSize: 10,
  173. title: undefined,
  174. operName: undefined,
  175. businessType: undefined,
  176. status: undefined
  177. }
  178. };
  179. },
  180. created() {
  181. this.getList();
  182. this.getDicts("sys_oper_type").then(response => {
  183. this.typeOptions = response.data;
  184. });
  185. this.getDicts("sys_common_status").then(response => {
  186. this.statusOptions = response.data;
  187. });
  188. },
  189. methods: {
  190. /** 查询登录日志 */
  191. getList() {
  192. this.loading = true;
  193. list(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
  194. this.list = response.rows;
  195. this.total = response.total;
  196. this.loading = false;
  197. }
  198. );
  199. },
  200. // 操作日志状态字典翻译
  201. statusFormat(row, column) {
  202. return this.selectDictLabel(this.statusOptions, row.status);
  203. },
  204. // 操作日志类型字典翻译
  205. typeFormat(row, column) {
  206. return this.selectDictLabel(this.typeOptions, row.businessType);
  207. },
  208. /** 搜索按钮操作 */
  209. handleQuery() {
  210. this.queryParams.pageNum = 1;
  211. this.getList();
  212. },
  213. /** 详细按钮操作 */
  214. handleView(row) {
  215. this.open = true;
  216. this.form = row;
  217. }
  218. }
  219. };
  220. </script>