操作日志

src/views/system/log/errorLog.vue

@@ -2,7 +2,6 @@
   <div>
 
     <div class="head-container">
-      <Search />
       <crudOperation>
         <el-button
           slot="left"
@@ -15,6 +14,7 @@
           清空
         </el-button>
       </crudOperation>
+      <Search />
     </div>
     <div class="app-container  container-wrap" style="min-height: calc(100vh - 242px)">
       <span class="right-top-line" />

src/views/system/log/search.vue

@@ -8,6 +8,7 @@
       placeholder="请输入你要搜索的内容"
       style="width: 200px;"
       class="filter-item"
+      @keyup.enter.native="crud.toQuery"
     />
     <date-range-picker v-model="query.createTime" class="date-item" />
     <rrOperation />
@@ -23,3 +24,17 @@ export default {
   mixins: [header()]
 }
 </script>
+
+<style lang="scss" scoped>
+.head-search{
+  margin-left: 10px;
+}
+.head-container{
+  .filter-item{
+    margin-right: 8px;
+  }
+  .date-item{
+    margin-right: 8px;
+  }
+}
+</style>

src/views/system/logManage/operateLog/index.vue

@@ -3,8 +3,8 @@
     <div class="head-container">
       <!-- <crudOperation /> -->
       <!-- <el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!selections.length" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
-      <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button>
-      <el-select v-model="oprType" class="filter-item" style="width: 100px; height: 30px;margin:0 0 0 10px" @change="crud.toQuery">
+      <!-- <button @click="test">测试</button> -->
+      <!-- <el-select v-model="oprType" class="filter-item" style="width: 100px; height: 30px;margin:0 0 0 10px" @change="crud.toQuery">
         <el-option v-for="item in oprTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <el-input
@@ -14,9 +14,9 @@
         placeholder="请输入关键词"
         style="width: 300px;margin-right:10px;padding-left:10px"
         class="input-prepend filter-item"
-      >
-        <!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px" @keyup.enter.native="crud.toQuery"> -->
-        <el-select slot="prepend" v-model="optionVal" style="width: 100px">
+      > -->
+      <!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px" @keyup.enter.native="crud.toQuery"> -->
+      <!-- <el-select slot="prepend" v-model="optionVal" style="width: 100px">
           <el-option
             v-for="item in options"
             :key="item.value"
@@ -24,28 +24,64 @@
             :value="item.value"
           />
         </el-select>
-      </el-input>
-      <date-range-picker v-model="queryTime" class="date-item" />
-      <rrOperation />
+      </el-input> -->
+      <!-- <date-range-picker v-model="queryTime" class="date-item" /> -->
+      <!-- <rrOperation /> -->
+      <!-- <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
+      <crudOperation>
+        <el-button
+          slot="left"
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :loading="crud.delAllLoading"
+          @click="delVisible = true"
+        >
+          清空
+        </el-button>
+      </crudOperation>
+      <Search />
     </div>
+    <!-- @row-click="clickRowHandler"
+      @selection-change="selectionChangeHandler" -->
     <el-table
       ref="table"
       :data="crud.data"
       style="width: 100%;"
       height="calc(100vh - 356px)"
-      @row-click="clickRowHandler"
-      @selection-change="selectionChangeHandler"
     >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column type="index" label="序号" width="100" align="center" />
-      <el-table-column prop="" label="操作结果" min-width="150" align="center" />
-      <el-table-column prop="" label="操作模块" align="center" min-width="100" />
-      <el-table-column prop="" label="操作子模块" align="center" min-width="120" />
-      <el-table-column prop="" label="操作类型" align="center" min-width="100" />
-      <el-table-column prop="" label="操作人" align="center" min-width="100" />
-      <el-table-column prop="" label="所属部门" align="center" min-width="120" />
-      <el-table-column prop="" label="ip地址" align="center" min-width="150" />
-      <el-table-column prop="" label="操作时间" align="center" min-width="180" />
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-form-item label="请求方法">
+              <span>{{ props.row.method }}</span>
+            </el-form-item>
+            <el-form-item label="请求参数">
+              <span>{{ props.row.params }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <!-- <el-table-column type="index" label="序号" width="100" align="center" /> -->
+      <el-table-column prop="username" label="用户名" min-width="100" align="center" />
+      <el-table-column prop="requestIp" label="IP" align="center" min-width="100" />
+      <el-table-column prop="address" label="IP来源" align="center" min-width="120" />
+      <el-table-column prop="description" label="描述内容" align="center" min-width="150" />
+      <el-table-column prop="browser" label="浏览器" align="center" min-width="100" />
+      <el-table-column prop="time" label="请求耗时" align="center" min-width="120">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建日期" align="center" min-width="150">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column prop="" label="操作时间" align="center" min-width="180" /> -->
       <el-table-column prop="" label="操作" align="center" min-width="100">
         <el-button size="mini" style="background:#3A99FD" @click="handleListen">查看监控</el-button>
       </el-table-column>
@@ -53,24 +89,40 @@
     <pagination />
     <!-- 查看监控 -->
     <Listen ref="listenDom" />
+    <!-- 清空 -->
+    <el-dialog :visible.sync="delVisible" title="确认清空">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p class="delMsg">确认清空所有操作日志吗?</p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="confirmDelAll">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import rrOperation from '@crud/RR.operation'
+// import rrOperation from '@crud/RR.operation'
 import CRUD, { presenter, crud } from '@crud/crud'
-import DateRangePicker from '@/components/DateRangePicker'
+// import DateRangePicker from '@/components/DateRangePicker'
 import pagination from '@crud/Pagination'
 import Listen from '../module/listen.vue'
+import Search from '@/views/system/log/search.vue'
+import crudOperation from '@crud/CRUD.operation'
+import { delAllInfo } from '@/api/monitor/log'
+
 export default {
   name: 'LoginLog',
-  components: { rrOperation, DateRangePicker, pagination, Listen },
+  components: { crudOperation, pagination, Search, Listen },
   mixins: [presenter(), crud()],
   cruds() {
     return CRUD({
       // url: 'api/storage/initStorageLogList',
       // sort: ['update_time,desc'],
       url: 'api/logs',
+      title: '日志',
       // crudMethod: caseCrudMethod,
       optShow: {
         add: false,
@@ -82,6 +134,8 @@ export default {
   },
   data() {
     return {
+      delVisible: false,
+      // -----------------
       selections: [],
       keyWord: '',
       oprType: 0,
@@ -106,15 +160,34 @@ export default {
     test() {
       console.log(this.crud, 'crud')
     },
-    clickRowHandler(row) {
-      this.$refs.table.toggleRowSelection(row) // 单击选中
-    },
-    selectionChangeHandler(val) {
-      this.selections = val
-    },
+    // clickRowHandler(row) {
+    //   this.$refs.table.toggleRowSelection(row) // 单击选中
+    // },
+    // selectionChangeHandler(val) {
+    //   this.selections = val
+    // },
     // 查看监控
     handleListen() {
       this.$refs.listenDom.dialogVisible = true
+    },
+    confirmDelAll() {
+      // this.$confirm(`确认清空所有操作日志吗?`, '提示', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+      this.crud.delAllLoading = true
+      delAllInfo().then(res => {
+        this.crud.delAllLoading = false
+        this.crud.dleChangePage(1)
+        this.crud.delSuccessNotify()
+        this.crud.toQuery()
+        this.delVisible = false
+      }).catch(err => {
+        this.crud.delAllLoading = false
+        console.log(err.response.data.message)
+      })
+      // })
     }
   }
 }
@@ -122,5 +195,8 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/archives-manage.scss";
-
+.head-container{
+  display: flex;
+  align-items: flex-start;
+}
 </style>