日志模块页面改造，页面结构调整，接口参数调整，增加分页功能

src/views/logManage/index.vue

@@ -30,6 +30,21 @@
     </a-card>
     <!-- 日志列表 -->
     <div class="log-list">
+      <div class="search-bar">
+        <a-row type="flex">
+          <a-col flex="290px">
+            <a-form-model-item label="Name">
+              <a-input v-model="nameStr" placeholder="Please Input..." />
+            </a-form-model-item>
+          </a-col>
+          <a-col flex="108px">
+            <a-button class="search-btn" type="primary" @click="onSearch">
+              <img src="@/assets/images/global/search.png" alt="" />
+              Search
+            </a-button>
+          </a-col>
+        </a-row>
+      </div>
       <custom-table
         size="middle"
         rowKey="id"
@@ -39,7 +54,7 @@
         :loading="isGettingTreeData || loading"
         :can-select="false"
         @change="handleTableChange"
-        :scroll="{ y: 'calc(100vh - 175px)' }"
+        :scroll="{ y: 'calc(100vh - 275px)' }"
       >
         <template slot="operate" slot-scope="{ record }">
           <a-space :size="20">
@@ -53,6 +68,22 @@
           </a-space>
         </template>
       </custom-table>
+      <a-pagination
+        size="small"
+        v-model="ipagination.current"
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="
+          (total, range) =>
+            `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
+        "
+        show-less-items
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
     </div>
     <!-- 日志列表结束 -->
     <custom-modal title="Log" :width="950" v-model="visible" :footer="null">
@@ -108,6 +139,7 @@ export default {
   data() {
     this.columns = columns
     return {
+      nameStr: '',
       disableMixinCreated: true,
       url: {
         list: '/logManage/findFiles',
@@ -121,12 +153,37 @@ export default {
       visible: false,
       isGettingDetail: false,
       logInfo: [],
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0,
+      },
     }
   },
   created() {
     this.getTreeData()
   },
   methods: {
+    onSearch() {
+      this.loadData()
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.loadData()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.loadData()
+    },
     async getTreeData() {
       try {
         this.isGettingTreeData = true
@@ -164,6 +221,8 @@ export default {
     },
     onSelect() {
       this.queryParam.path = this.selectedKeys[0]
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 10
       this.loadData()
     },
 
@@ -179,10 +238,14 @@ export default {
       this.onClearSelected()
 
       var params = this.getQueryParams() //查询条件
+      params.name = this.nameStr
+      params.pageNo = this.ipagination.current
+      params.pageSize = this.ipagination.pageSize
       this.loading = true
       getAction(this.url.list, params)
-        .then((res) => {
-          this.dataSource = res
+        .then(({ result: { records, total } }) => {
+          this.dataSource = records
+          this.ipagination.total = total
         })
         .finally(() => {
           this.loading = false
@@ -302,6 +365,10 @@ export default {
       }
     }
   }
+  &-list {
+    position: relative;
+    overflow: hidden;
+  }
 }
 
 .log-detail {
@@ -314,4 +381,59 @@ export default {
     }
   }
 }
+.search-bar {
+  height: 50px;
+  border-top: 1px solid rgba(13, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
+  margin-bottom: 15px;
+  padding: 8px 10px;
+  background: rgba(12, 235, 201, 0.05);
+}
+.ant-input {
+  width: 266px;
+}
+::v-deep {
+  .ant-form-item {
+    display: flex;
+    margin-bottom: 0;
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 32px;
+      height: 32px;
+    }
+    .ant-form-item-label {
+      flex-shrink: 0;
+      margin-right: 10px;
+      label {
+        font-size: 16px;
+        font-family: ArialMT;
+        color: #ade6ee;
+        &::after {
+          display: none;
+        }
+      }
+    }
+    .ant-calendar-range-picker-separator {
+      color: white;
+    }
+    .ant-form-item-control-wrapper {
+      width: 100%;
+      // overflow: hidden;
+    }
+  }
+}
+.search-btn {
+  margin-bottom: 10px;
+  img {
+    width: 16px;
+    height: 17px;
+    margin-right: 9px;
+  }
+}
+.ant-pagination {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
 </style>