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

src/components/Table/src/Table.vue

@@ -96,7 +96,7 @@
               <slot  :name="item.value" :scope="scope"/>
             </template>
           </el-table-column>
-          <el-table-column v-else :prop="item.prop" v-bind="item" show-overflow-tooltip align="center">
+          <el-table-column v-else :prop="item.prop" v-bind="item" show-overflow-tooltip>
             <template #default="scope" v-if="item.render">
               <Render :column="item" :row="scope.row" :render="item.render" :index="scope.$index" />
             </template>

src/components/Table/src/hooks/useColumns.ts

@@ -53,6 +53,8 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
       .map((column: BasicColumn) => {
         //默认 ellipsis 为true
         column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
+        // align 默认为center
+        column.align = typeof column.align === 'undefined' ? 'center' : column.align;
         const { edit } = column;
         if (edit) {
           column.render = renderEditCell(column);

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

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

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

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