style: MML日志管理页面排版

src/views/logManage/mml/index.vue

@@ -66,49 +66,49 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.rowId'),
     dataIndex: 'id',
-    align: 'center',
-    width: 2,
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.logManage.mml.account'),
     dataIndex: 'user',
-    align: 'center',
-    width: 3,
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.logManage.mml.ip'),
     dataIndex: 'ip',
-    align: 'center',
-    width: 3,
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.logManage.mml.type'),
     dataIndex: 'neType',
-    align: 'center',
-    width: 3,
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.logManage.mml.neId'),
     dataIndex: 'neId',
-    align: 'center',
-    width: 3,
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.mml.logTime'),
+    dataIndex: 'logTime',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
   },
   {
     title: t('views.logManage.mml.MML'),
     dataIndex: 'mml',
     key: 'mml',
     align: 'left',
-    width: 5,
-  },
-  {
-    title: t('views.logManage.mml.logTime'),
-    dataIndex: 'logTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 3,
+    width: 200,
   },
 ];
 
@@ -149,7 +149,7 @@ function fnTableSize({ key }: MenuInfo) {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -183,7 +183,10 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item :label="t('views.logManage.mml.account')" name="accountName">
+            <a-form-item
+              :label="t('views.logManage.mml.account')"
+              name="accountName"
+            >
               <a-input
                 v-model:value="queryParams.accountName"
                 :allow-clear="true"
@@ -191,7 +194,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item :label="t('views.logManage.mml.logTime')" name="queryRangePicker">
+            <a-form-item
+              :label="t('views.logManage.mml.logTime')"
+              name="queryRangePicker"
+            >
               <a-range-picker
                 v-model:value="queryRangePicker"
                 allow-clear
@@ -280,7 +286,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: 1000, y: 400 }"
+        :scroll="{ x: tableColumns.length * 100 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'mml'">
@@ -300,7 +306,7 @@ onMounted(() => {
   padding: 0 24px;
 }
 .mmlText {
-  // max-width: 800px; sdf 
+  // max-width: 800px; sdf
   cursor: pointer;
 }
 </style>