style: 接口操作日志管理页面排版

src/views/system/log/operate/index.vue

@@ -103,43 +103,51 @@ let tableColumns: ColumnsType = [
     title: t('views.system.log.operate.operId'),
     dataIndex: 'operId',
     align: 'center',
+    width: 100,
   },
   {
     title: t('views.system.log.operate.moduleName'),
     dataIndex: 'title',
-    align: 'center',
+    align: 'left',
+    width: 200,
   },
   {
     title: t('views.system.log.operate.workType'),
     dataIndex: 'businessType',
     key: 'businessType',
-    align: 'center',
+    align: 'left',
+    width: 120,
   },
   {
     title: t('views.system.log.operate.operUser'),
     dataIndex: 'operName',
-    align: 'center',
+    align: 'left',
+    width: 120,
   },
   {
     title: t('views.system.log.operate.requestMe'),
     dataIndex: 'requestMethod',
-    align: 'center',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.system.log.operate.host'),
     dataIndex: 'operIp',
     align: 'center',
+    width: 150,
   },
   {
     title: t('views.system.log.operate.operStatus'),
     dataIndex: 'status',
     key: 'status',
     align: 'center',
+    width: 150,
   },
   {
     title: t('views.system.log.operate.operDate'),
     dataIndex: 'operTime',
     align: 'center',
+    width: 150,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -149,7 +157,8 @@ let tableColumns: ColumnsType = [
     title: t('views.system.log.operate.useTime'),
     dataIndex: 'costTime',
     key: 'costTime',
-    align: 'center',
+    align: 'right',
+    width: 150,
     customRender(opt) {
       return `${opt.value} ms`;
     },
@@ -157,7 +166,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('common.operate'),
     key: 'operId',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -568,7 +577,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :row-class-name="fnTableStriped"
-        :scroll="{ x: true }"
+        :scroll="{ x: tableColumns.length * 150 }"
         :pagination="tablePagination"
         :row-selection="{
           type: 'checkbox',
@@ -611,24 +620,38 @@ onMounted(() => {
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.operId')" name="operId">
+            <a-form-item
+              :label="t('views.system.log.operate.operId')"
+              name="operId"
+            >
               {{ modalState.from.operId }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.operStatus')" name="status">
+            <a-form-item
+              :label="t('views.system.log.operate.operStatus')"
+              name="status"
+            >
               <a-tag :color="+modalState.from.status ? 'success' : 'error'">
-                {{ [t('views.system.log.operate.fail'),t('views.system.log.operate.suss')][+modalState.from.status] }}
+                {{
+                  [
+                    t('views.system.log.operate.fail'),
+                    t('views.system.log.operate.suss'),
+                  ][+modalState.from.status]
+                }}
               </a-tag>
             </a-form-item>
           </a-col>
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.workType')" name="businessType">
+            <a-form-item
+              :label="t('views.system.log.operate.workType')"
+              name="businessType"
+            >
               {{ modalState.from.title }} /
               <DictTag
                 :options="dict.sysBusinessType"
@@ -637,7 +660,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.operUser')" name="operName">
+            <a-form-item
+              :label="t('views.system.log.operate.operUser')"
+              name="operName"
+            >
               {{ modalState.from.operName }} / {{ modalState.from.operIp }} /
               {{ modalState.from.operLocation }}
             </a-form-item>
@@ -645,13 +671,19 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.RequestIp')" name="operUrl">
+            <a-form-item
+              :label="t('views.system.log.operate.RequestIp')"
+              name="operUrl"
+            >
               {{ modalState.from.requestMethod }} -
               {{ modalState.from.operUrl }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.operTime')" name="operTime">
+            <a-form-item
+              :label="t('views.system.log.operate.operTime')"
+              name="operTime"
+            >
               <span v-if="+modalState.from.operTime > 0">
                 {{ parseDateToStr(+modalState.from.operTime) }}
               </span>
@@ -660,24 +692,40 @@ onMounted(() => {
         </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.useTime')" name="costTime">
+            <a-form-item
+              :label="t('views.system.log.operate.useTime')"
+              name="costTime"
+            >
               {{ modalState.from.costTime }} ms
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.system.log.operate.operMe')"  name="method">
+            <!-- <a-form-item
+              :label="t('views.system.log.operate.operMe')"
+              name="method"
+            >
               {{ modalState.from.method }}
-            </a-form-item>
+            </a-form-item> -->
           </a-col>
         </a-row>
-        <a-form-item :label="t('views.system.log.operate.reqParam')" name="operParam">
+        <a-form-item
+          :label="t('views.system.log.operate.reqParam')"
+          name="operParam"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.operParam"
             :auto-size="{ minRows: 2, maxRows: 6 }"
             :disabled="true"
           />
         </a-form-item>
-        <a-form-item :label="t('views.system.log.operate.operInfo')" name="operMsg">
+        <a-form-item
+          :label="t('views.system.log.operate.operInfo')"
+          name="operMsg"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
           <a-textarea
             v-model:value="modalState.from.operMsg"
             :auto-size="{ minRows: 2, maxRows: 6 }"
@@ -686,7 +734,9 @@ onMounted(() => {
         </a-form-item>
       </a-form>
       <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{t('common.cancel')}}</a-button>
+        <a-button key="cancel" @click="fnModalCancel">
+          {{ t('common.cancel') }}
+        </a-button>
       </template>
     </a-modal>
   </PageContainer>