登录日志、操作日志列表样式

src/views/system/logger/loginLog/columns.ts

@@ -11,73 +11,80 @@ export const columns = [
     title: 'ID',
     key: 'id',
     fixed: 'left',
-    width: 50,
-  },
-  {
-    title: '操作用户',
-    key: 'username',
     width: 100,
   },
   {
-    title: '请求ip',
+    title: '访客',
-    key: 'ip',
+    align: 'left',
-    width: 100,
-  },
-  {
-    title: '浏览器',
-    key: 'browser',
-    width: 100,
-  },
-  {
-    title: '操作系统',
-    key: 'os',
-    width: 100,
-  },
-  {
-    title: '操作类型',
-    key: 'typeText',
-    width: 100,
-  },
-  {
-    title: '操作来源',
-    key: 'sourceText',
-    width: 100,
-  },
-  {
-    title: '请求方式',
-    key: 'requestMethod',
-    width: 100,
-  },
-  {
-    title: '请求URL',
-    key: 'url',
-    width: 100,
-  },
-  {
-    title: '请求地区',
-    key: 'location',
-    width: 100,
-  },
-  {
-    title: '请求耗时',
-    key: 'consumeTime',
-    width: 100,
-  },
-  {
-    title: '状态',
-    key: 'status',
     render(record) {
-      return h(
+      return h('div', [
-        NTag,
+        h(
-        {
+          'div',
-          type: record.status == 0 ? 'success' : 'error',
+          {
-        },
+            style: { marginBottom: '5px' },
-        {
+          },
-          default: () => (record.status == 0 ? '正常' : '异常'),
+          record.username,
-        },
+        ),
-      );
+        h(
+          'div',
+          {
+            style: { marginBottom: '5px' },
+          },
+          record.ip,
+        ),
+        h('div', record.location),
+      ]);
+    },
+  },
+  {
+    title: '请求接口',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h(
+          NTag,
+          {
+            type: 'info',
+            style: { marginBottom: '5px' },
+          },
+          {
+            default: () => record.requestMethod,
+          },
+        ),
+        h('div', '接口：' + record.url),
+      ]);
+    },
+  },
+  {
+    title: '接口响应',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h('span', '状态：'),
+        h(
+          NTag,
+          {
+            type: record.status == 0 ? 'success' : 'error',
+            style: { marginBottom: '5px' },
+          },
+          {
+            default: () => (record.status == 0 ? '正常' : '异常'),
+          },
+        ),
+        h('div', '请求耗时：' + record.consumeTime + 'ms'),
+      ]);
+    },
+  },
+  {
+    label: '操作来源',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h('div', '系统：' + record.os),
+        h('div', '类型：' + record.typeText),
+        h('div', '来源：' + record.sourceText),
+      ]);
     },
-    width: 100,
   },
   {
     title: '创建时间',

src/views/system/logger/operLog/columns.ts

@@ -14,75 +14,78 @@ export const columns = [
     width: 100,
   },
   {
-    title: '日志标题',
+    title: '访客',
-    key: 'title',
+    align: 'left',
-    width: 100,
-  },
-  {
-    title: '操作用户',
-    key: 'createUser',
-    width: 100,
-  },
-  {
-    title: '请求ip',
-    key: 'ip',
-    width: 140,
-  },
-  {
-    title: '浏览器',
-    key: 'browser',
-    width: 100,
-  },
-  {
-    title: '操作系统',
-    key: 'os',
-    width: 100,
-  },
-  {
-    title: '操作类型',
-    key: 'typeText',
-    width: 100,
-  },
-  {
-    title: '操作来源',
-    key: 'sourceText',
-    width: 100,
-  },
-  {
-    title: '请求方式',
-    key: 'requestMethod',
-    width: 100,
-  },
-  {
-    title: '请求URL',
-    key: 'url',
-    width: 150,
-  },
-  {
-    title: '请求地区',
-    key: 'location',
-    width: 100,
-  },
-  {
-    title: '请求耗时',
-    key: 'consumeTime',
-    width: 100,
-  },
-  {
-    title: '状态',
-    key: 'status',
     render(record) {
-      return h(
+      return h('div', [
-        NTag,
+        h(
-        {
+          'div',
-          type: record.status == 0 ? 'success' : 'error',
+          {
-        },
+            style: { marginBottom: '5px' },
-        {
+          },
-          default: () => (record.status == 0 ? '正常' : '异常'),
+          record.createUser,
-        },
+        ),
-      );
+        h(
+          'div',
+          {
+            style: { marginBottom: '5px' },
+          },
+          record.ip,
+        ),
+        h('div', record.location),
+      ]);
+    },
+  },
+  {
+    title: '请求接口',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h(
+          NTag,
+          {
+            type: 'info',
+            style: { marginBottom: '5px' },
+          },
+          {
+            default: () => record.requestMethod,
+          },
+        ),
+        h('div', '接口：' + record.url),
+        h('div', '名称：' + record.title),
+      ]);
+    },
+  },
+  {
+    title: '接口响应',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h('span', '状态：'),
+        h(
+          NTag,
+          {
+            type: record.status == 0 ? 'success' : 'error',
+            style: { marginBottom: '5px' },
+          },
+          {
+            default: () => (record.status == 0 ? '正常' : '异常'),
+          },
+        ),
+        h('div', '请求耗时：' + record.consumeTime + 'ms'),
+      ]);
+    },
+  },
+  {
+    label: '操作来源',
+    align: 'left',
+    render(record) {
+      return h('div', [
+        h('div', '系统：' + record.os),
+        h('div', '类型：' + record.typeText),
+        h('div', '来源：' + record.sourceText),
+      ]);
     },
-    width: 100,
   },
   {
     title: '创建时间',