更改日志功能样式

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -24,72 +24,61 @@
       style="width: 100%"
       tooltip-effect="dark"
     >
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <el-form label-position="left" class="table-expand">
-            <el-form-item label="请求ip">
-              <span>{{ props.row.ip }}</span>
-            </el-form-item>
-            <el-form-item label="请求日期">
-              <span>{{props.row.CreatedAt|formatDate}}</span>
-            </el-form-item>
-            <el-form-item label="请求方法">
-              <span>{{ props.row.method }}</span>
-            </el-form-item>
-            <el-form-item label="请求路径">
-              <span>{{ props.row.path }}</span>
-            </el-form-item>
-            <el-form-item label="结果状态码">
-              <span>{{ props.row.status }}</span>
-            </el-form-item>
-            <el-form-item label="latency">
-              <span>{{ props.row.latency }}</span>
-            </el-form-item>
-            <el-form-item label="agent">
-              <span>{{ props.row.agent }}</span>
-            </el-form-item>
-            <el-form-item label="body">
-              <span>{{ props.row.body||'无入参' }}</span>
-            </el-form-item>
-            <el-form-item label="error_message">
-              <span>{{ props.row.error_message }}</span>
-            </el-form-item>
-            <el-form-item label="user_id">
-              <span>{{ props.row.user_id }}</span>
-            </el-form-item>
-          </el-form>
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column label="操作人" width="140">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.user.userName}}({{scope.row.user.nickName}})
+          </div>
         </template>
       </el-table-column>
-      <el-table-column type="selection" width="55"></el-table-column>
-
       <el-table-column label="日期" width="180">
         <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
       </el-table-column>
-
       <el-table-column label="请求ip" prop="ip" width="120"></el-table-column>
-
       <el-table-column label="请求方法" prop="method" width="120"></el-table-column>
-
       <el-table-column label="请求路径" prop="path" width="240"></el-table-column>
+      <el-table-column label="请求" prop="path" width="80">
+        <template slot-scope="scope">
+          <div>
+            <el-popover placement="top-start" trigger="hover" v-if="scope.row.body">
+              <div class="popover-box">
+                <pre>{{JSON.parse(scope.row.body)}}</pre>
+              </div>
+              <i class="el-icon-view" slot="reference"></i>
+            </el-popover>
 
+            <span v-else>无</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="响应" prop="path" width="80">
+        <template slot-scope="scope">
+          <div>
+            <el-popover placement="top-start" trigger="hover" v-if="scope.row.resp">
+              <div class="popover-box">
+                <pre>{{JSON.parse(scope.row.resp)}}</pre>
+              </div>
+              <i class="el-icon-view" slot="reference"></i>
+            </el-popover>
+            <span v-else>无</span>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="error_message" prop="error_message" width="120"></el-table-column>
-
-      <el-table-column label="user_id" prop="user_id" width="120"></el-table-column>
-
       <el-table-column label="按钮组">
         <template slot-scope="scope">
-          <el-popover placement="top" width="160" v-model="scope.row.visible">
+          <el-popover placement="top" v-model="scope.row.visible" width="160">
             <p>确定要删除吗？</p>
             <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-              <el-button type="primary" size="mini" @click="deleteSysOperationRecord(scope.row)">确定</el-button>
+              <el-button @click="scope.row.visible = false" size="mini" type="text">取消</el-button>
+              <el-button @click="deleteSysOperationRecord(scope.row)" size="mini" type="primary">确定</el-button>
             </div>
-            <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference">删除</el-button>
+            <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">删除</el-button>
           </el-popover>
         </template>
       </el-table-column>
     </el-table>
-
     <el-pagination
       :current-page="page"
       :page-size="pageSize"
@@ -107,19 +96,19 @@
 import {
   deleteSysOperationRecord,
   getSysOperationRecordList
-} from "@/api/sysOperationRecord"; //  此处请自行替换地址
-import { formatTimeToStr } from "@/utils/data";
-import infoList from "@/components/mixins/infoList";
+} from '@/api/sysOperationRecord' //  此处请自行替换地址
+import { formatTimeToStr } from '@/utils/data'
+import infoList from '@/components/mixins/infoList'
 
 export default {
-  name: "SysOperationRecord",
+  name: 'SysOperationRecord',
   mixins: [infoList],
   data() {
     return {
       listApi: getSysOperationRecordList,
       dialogFormVisible: false,
       visible: false,
-      type: "",
+      type: '',
       formData: {
         ip: null,
         method: null,
@@ -130,48 +119,48 @@ export default {
         error_message: null,
         user_id: null
       }
-    };
+    }
   },
   filters: {
     formatDate: function(time) {
-      if (time != null && time != "") {
-        var date = new Date(time);
-        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
+      if (time != null && time != '') {
+        var date = new Date(time)
+        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
       } else {
-        return "";
+        return ''
       }
     },
     formatBoolean: function(bool) {
       if (bool != null) {
-        return bool ? "是" : "否";
+        return bool ? '是' : '否'
       } else {
-        return "";
+        return ''
       }
     }
   },
   methods: {
     //条件搜索前端看此方法
     onSubmit() {
-      this.page = 1;
-      this.pageSize = 10;
-      this.getTableData();
+      this.page = 1
+      this.pageSize = 10
+      this.getTableData()
     },
     async deleteSysOperationRecord(row) {
-      this.visible = false;
-      const res = await deleteSysOperationRecord({ ID: row.ID });
+      this.visible = false
+      const res = await deleteSysOperationRecord({ ID: row.ID })
       if (res.code == 0) {
         this.$message({
-          type: "success",
-          message: "删除成功"
-        });
-        this.getTableData();
+          type: 'success',
+          message: '删除成功'
+        })
+        this.getTableData()
       }
     }
   },
   created() {
-    this.getTableData();
+    this.getTableData()
   }
-};
+}
 </script>
 
 <style lang="scss">
@@ -188,4 +177,15 @@ export default {
     }
   }
 }
+.popover-box{
+  background:#112435;
+  color:#f08047;
+  height:600px;
+  width:420px;
+  overflow:auto;
+
+}
+.popover-box::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
 </style>