按组件规范翻新设备点检日志

src/views/equipment-management/inspection-management/inspection-logs/index.vue

@@ -23,7 +23,6 @@
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
             <el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
-            <el-button type="success" icon="el-icon-download" @click="handleExport">{{ $t(key('export')) }}</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -34,32 +33,22 @@
       :columns="columns"
       :data="tableData"
       :loading="loading"
-      :toolbar-buttons="[]"
+      :toolbar-buttons="toolbarButtons"
       :row-buttons="[]"
-      :pagination="null"
+      :pagination="pagination"
+      auto-height
+      @page-change="onPageChange"
     >
       <template #col-result="{ row }">
         <el-tag :type="row.result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.result }}</el-tag>
       </template>
     </page-table>
-
-    <div class="logs-pagination">
-      <el-pagination
-        :current-page="pagination.current"
-        :page-size="pagination.size"
-        :total="pagination.total"
-        :page-sizes="[10, 25, 50, 100, 250, 500]"
-        :disabled="loading"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="onSizeChange"
-        @current-change="onCurrentChange"
-      />
-    </div>
   </d2-container>
 </template>
 
 <script>
 import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
 import { i18nMixin } from '@/composables/useI18n'
 import { confirmMixin } from '@/composables/useConfirmHandle'
 import PageTable from '@/components/page-table'
@@ -94,7 +83,8 @@ export default {
       userOptions: [],
       search: { device_code: '', device_name: '', device_check_items_name: '', user_id: '', create_time: [] },
       pagination: { current: 1, size: 10, total: 0 },
-      columns: []
+      columns: [],
+      toolbarButtons: []
     }
   },
   created () {
@@ -116,6 +106,13 @@ export default {
       { prop: 'username', label: this.key('operator'), minWidth: 120 },
       { prop: 'create_time', label: this.key('inspection_time'), minWidth: 160 }
     ], { selectionWidth: 0 })
+    const btns = useTableButtons({
+      toolbar: [
+        { key: 'export', label: this.key('export'), icon: 'el-icon-download', type: 'success', onClick: this.handleExport }
+      ],
+      row: []
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
     this.loadUsers()
     this.fetchData()
   },
@@ -157,13 +154,9 @@ export default {
       this.pagination.current = 1
       this.fetchData()
     },
-    onSizeChange (size) {
+    onPageChange (page) {
-      this.pagination.current = 1
+      this.pagination.current = Number(page.current || page.currentPage || 1)
-      this.pagination.size = Number(size) || 10
+      this.pagination.size = Number(page.size || page.pageSize || this.pagination.size || 10)
-      this.fetchData()
-    },
-    onCurrentChange (current) {
-      this.pagination.current = Number(current) || 1
       this.fetchData()
     },
     async handleExport () {
@@ -181,11 +174,6 @@ export default {
 .search-bar {
   padding: 10px 0;
 }
-.logs-pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 12px;
-}
 /deep/ .el-form-item--mini.el-form-item {
   margin-bottom: 4px;
 }