改日志页UI

src/views/system/logs/operlogs.vue

-<template>
-  <div class="app-container">
-    <el-row class="toolbar">
-      <el-col :span="24">
-        <el-form :inline="true" :model="filters">
-          <el-select v-model="filters.status" placeholder="状态">
-            <el-option
-              v-for="item in optionStatus"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        <el-select v-model="filters.column" placeholder="请选择">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-        <el-form-item>
-          <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" v-on:click="init">查询</el-button>
-        </el-form-item>
-      </el-form>
-      </el-col>
-
-    </el-row>
-    <el-row>
-      <el-col :span="24">
-        <el-table :data="data.list"  element-loading-text="Loading"   highlight-current-row>
-          <el-table-column label='序号' width="80" type="index">
-          </el-table-column>
-          <el-table-column label="帐号" prop="account" width="80">
-          </el-table-column>
-          <el-table-column label="动作" prop="action">
-          </el-table-column>
-          <el-table-column label="描述" prop="remark">
-          </el-table-column>
-          <el-table-column label="IP" prop="ip">
-          </el-table-column>
-          <el-table-column label="时间">
-            <template slot-scope="scope">
-              {{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}}
-            </template>
-          </el-table-column>
-          <el-table-column label="参数">
-            <template slot-scope="scope">
-             <el-popover trigger="hover" placement="top">
-               {{ scope.row.params }}
-               <div slot="reference" class="name-wrapper">
-                <el-tag size="medium">参数</el-tag>
-              </div>
-             </el-popover>
-           </template>
-          </el-table-column>
-          <el-table-column label="返回" prop="result">
-            <template slot-scope="scope">
-             <el-popover trigger="hover" placement="top">
-               {{ scope.row.result }}
-               <div slot="reference" class="name-wrapper">
-                <el-tag size="medium"> {{ JSON.parse(scope.row.result).msg }}</el-tag>
-              </div>
-             </el-popover>
-           </template>
-          </el-table-column>
-          <el-table-column label="结果">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status===0?'success':'danger'">{{scope.row.status===0?'成功':'失败'}}</el-tag>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-col>
-    </el-row>
-    <el-row class="toolbar">
-      <el-col :span="24">
-        <el-pagination
-         layout="total, sizes, prev, pager, next"
-         @size-change="handleSizeChange"
-         @current-change="handleCurrentChange"
-        :page-sizes="this.$store.state.common.pageSizes"
-        :page-size="this.$store.state.common.pageSize"
-        :total="data.total"
-        style="float:right;">
-        </el-pagination>
-      </el-col>
-      </el-col>
-    </el-row>
-
-
-  </div>
-</template>
-
-<script>
-
-import { getLogs } from '@/api/api'
-
-export default {
-  data() {
-    return {
-      page: 1,
-      data:{},
-      filters: {
-          column:'',
-          keyword:'',
-          status:-1
-        },
-        optionStatus:[
-            {
-             value: -1,
-             label: '全部'
-           },
-            {
-             value: 0,
-             label: '成功'
-           }, {
-             value: 1,
-             label: '失败'
-           }
-        ],
-        options: [{
-           value: 'account',
-           label: '账号'
-         }, {
-           value: 'ip',
-           label: 'IP'
-         }, {
-           value: 'action',
-           label: '动作'
-         }, {
-           value: 'remark',
-           label: '描述'
-         }],
-
-    }
-
-  },
-  created() {
-    this.init()
-  },
-  methods: {
-    init() {
-      let para = {
-        page: this.page,
-        pageSize:this.$store.state.common.pageSize,
-        column:this.filters.column,
-        keyword:this.filters.keyword,
-        status:this.filters.status
-      };
-      getLogs(para).then(data => {
-        this.data = data
-      })
-    },
-    handleSizeChange(val) {
-      this.$store.dispatch('updatePageSize',val);
-      this.init();
-
-     },
-     handleCurrentChange(val) {
-       this.page = val;
-       this.init();
-     },
-  }
-}
-</script>
+<template>
+  <div class="app-container">
+    <el-row class="toolbar">
+      <el-col :span="24">
+        <el-form :inline="true" :model="filters">
+          <el-select v-model="filters.status" placeholder="状态">
+            <el-option
+              v-for="item in optionStatus"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        <el-select v-model="filters.column" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-form-item>
+          <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" v-on:click="init">查询</el-button>
+        </el-form-item>
+      </el-form>
+      </el-col>
+
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-table :data="data.list"  element-loading-text="Loading"   highlight-current-row>
+          <el-table-column label='序号' width="80" type="index">
+          </el-table-column>
+          <el-table-column label="帐号" prop="account" width="120">
+          </el-table-column>
+          <el-table-column label="动作" prop="action">
+          </el-table-column>
+          <el-table-column label="描述" prop="remark">
+          </el-table-column>
+          <el-table-column label="IP" prop="ip">
+          </el-table-column>
+          <el-table-column label="时间">
+            <template slot-scope="scope">
+              {{scope.row.time/1000|moment("YYYY-MM-DD HH:mm:ss")}}
+            </template>
+          </el-table-column>
+          <el-table-column label="参数">
+            <template slot-scope="scope">
+             <el-popover trigger="hover" placement="top">
+               {{ scope.row.params }}
+               <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">参数</el-tag>
+              </div>
+             </el-popover>
+           </template>
+          </el-table-column>
+          <el-table-column label="返回" prop="result">
+            <template slot-scope="scope">
+             <el-popover trigger="hover" placement="top">
+               {{ scope.row.result }}
+               <div slot="reference" class="name-wrapper">
+                <el-tag size="medium"> {{ JSON.parse(scope.row.result).msg }}</el-tag>
+              </div>
+             </el-popover>
+           </template>
+          </el-table-column>
+          <el-table-column label="结果">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status===0?'success':'danger'">{{scope.row.status===0?'成功':'失败'}}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row class="toolbar">
+      <el-col :span="24">
+        <el-pagination
+         layout="total, sizes, prev, pager, next"
+         @size-change="handleSizeChange"
+         @current-change="handleCurrentChange"
+        :page-sizes="this.$store.state.common.pageSizes"
+        :page-size="this.$store.state.common.pageSize"
+        :total="data.total"
+        style="float:right;">
+        </el-pagination>
+      </el-col>
+      </el-col>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+
+import { getLogs } from '@/api/api'
+
+export default {
+  data() {
+    return {
+      page: 1,
+      data:{},
+      filters: {
+          column:'',
+          keyword:'',
+          status:-1
+        },
+        optionStatus:[
+            {
+             value: -1,
+             label: '全部'
+           },
+            {
+             value: 0,
+             label: '成功'
+           }, {
+             value: 1,
+             label: '失败'
+           }
+        ],
+        options: [{
+           value: 'account',
+           label: '账号'
+         }, {
+           value: 'ip',
+           label: 'IP'
+         }, {
+           value: 'action',
+           label: '动作'
+         }, {
+           value: 'remark',
+           label: '描述'
+         }],
+
+    }
+
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let para = {
+        page: this.page,
+        pageSize:this.$store.state.common.pageSize,
+        column:this.filters.column,
+        keyword:this.filters.keyword,
+        status:this.filters.status
+      };
+      getLogs(para).then(data => {
+        this.data = data
+      })
+    },
+    handleSizeChange(val) {
+      this.$store.dispatch('updatePageSize',val);
+      this.init();
+
+     },
+     handleCurrentChange(val) {
+       this.page = val;
+       this.init();
+     },
+  }
+}
+</script>