From 9bdef88eea54048a1619427c2d242ab4be54c3bc Mon Sep 17 00:00:00 2001
From: wang-liang0615 <dhuwl0615@163.com>
Date: Thu, 4 Jan 2024 13:39:55 +0800
Subject: [PATCH] refactor(ui):extract pager components

---
 cmdb-ui/src/components/Pager/index.js         |   2 +
 cmdb-ui/src/components/Pager/index.vue        | 138 ++++++++++++++++++
 .../src/modules/acl/views/module/pager.vue    | 116 ---------------
 .../views/module/permissionHistoryTable.vue   |   2 +-
 .../acl/views/module/resourceHistoryTable.vue |   2 +-
 .../views/module/resourceTypeHistoryTable.vue |   2 +-
 .../acl/views/module/roleHistoryTable.vue     |   2 +-
 .../acl/views/module/triggerHistoryTable.vue  |   2 +-
 .../modules/permissionTable.vue               |   2 +-
 .../modules/resourceHistoryTable.vue          |   2 +-
 .../modules/resourceTypeHistoryTable.vue      |   2 +-
 .../modules/roleHistoryTable.vue              |   2 +-
 .../modules/triggerHistoryTable.vue           |   2 +-
 .../operation_history/modules/ciTable.vue     |   2 +-
 .../views/operation_history/modules/pager.vue | 116 ---------------
 .../operation_history/modules/relation.vue    |   2 +-
 16 files changed, 152 insertions(+), 244 deletions(-)
 create mode 100644 cmdb-ui/src/components/Pager/index.js
 create mode 100644 cmdb-ui/src/components/Pager/index.vue
 delete mode 100644 cmdb-ui/src/modules/acl/views/module/pager.vue
 delete mode 100644 cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue

diff --git a/cmdb-ui/src/components/Pager/index.js b/cmdb-ui/src/components/Pager/index.js
new file mode 100644
index 0000000..79690bb
--- /dev/null
+++ b/cmdb-ui/src/components/Pager/index.js
@@ -0,0 +1,2 @@
+import Pager from './index.vue'
+export default Pager
diff --git a/cmdb-ui/src/components/Pager/index.vue b/cmdb-ui/src/components/Pager/index.vue
new file mode 100644
index 0000000..da95a04
--- /dev/null
+++ b/cmdb-ui/src/components/Pager/index.vue
@@ -0,0 +1,138 @@
+<template>
+    <div>
+      <a-row class="row" type="flex" justify="end">
+        <a-col>
+          <a-space align="end">
+            <a-button
+              class="left-button"
+              size="small"
+              :disabled="prevIsDisabled"
+              @click="prevPage"
+            ><a-icon
+              type="left"
+            /></a-button>
+            <a-button class="page-button" size="small">{{ currentPage }}</a-button>
+            <a-button
+              class="right-button"
+              size="small"
+              :disabled="nextIsDisabled"
+              @click="nextPage"
+            ><a-icon
+              type="right"
+            /></a-button>
+            <a-dropdown
+              class="dropdown"
+              size="small"
+              placement="topCenter"
+              :trigger="['click']"
+              :disabled="dropdownIsDisabled"
+            >
+              <a-menu slot="overlay">
+                <a-menu-item v-for="(size, index) in pageSizes" :key="index" @click="handleItemClick(size)">
+                  {{ `${size}${$t('itemsPerPage')}` }}
+                </a-menu-item>
+              </a-menu>
+              <a-button size="small">{{ `${pageSize}${$t('itemsPerPage')}` }}<a-icon type="down" /> </a-button>
+            </a-dropdown>
+          </a-space>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'Pager',
+    props: {
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      pageSize: {
+        type: Number,
+        required: true,
+      },
+      pageSizes: {
+        type: Array,
+        required: true,
+      },
+      total: {
+        type: Number,
+        required: true,
+      },
+      isLoading: {
+        type: Boolean,
+        required: false,
+      },
+    },
+    data() {
+      return {
+        dropdownIsDisabled: false,
+        prevIsDisabled: true,
+      }
+    },
+    computed: {
+      nextIsDisabled() {
+        return this.isLoading || this.total < this.pageSize
+      },
+    },
+    watch: {
+      isLoading: {
+        immediate: true,
+        handler: function(val) {
+          if (val) {
+            this.dropdownIsDisabled = true
+            this.prevIsDisabled = true
+          } else {
+            this.dropdownIsDisabled = false
+            if (this.currentPage === 1) {
+              this.prevIsDisabled = true
+            } else {
+              this.prevIsDisabled = false
+            }
+          }
+        },
+      },
+      currentPage: {
+        immediate: true,
+        handler: function(val) {
+          if (val === 1) {
+            this.prevIsDisabled = true
+          }
+        },
+      },
+    },
+    methods: {
+      handleItemClick(size) {
+        this.$emit('showSizeChange', size)
+      },
+      nextPage() {
+        const pageNum = this.currentPage + 1
+        this.$emit('change', pageNum)
+      },
+      prevPage() {
+        const pageNum = this.currentPage - 1
+        this.$emit('change', pageNum)
+      },
+    },
+  }
+  </script>
+  
+  <style lang="less" scoped>
+  .row {
+    margin-top: 5px;
+    .left-button {
+      padding: 0;
+      width: 24px;
+    }
+    .right-button {
+      padding: 0;
+      width: 24px;
+    }
+    .page-button {
+      padding: 0;
+      width: 24px;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/cmdb-ui/src/modules/acl/views/module/pager.vue b/cmdb-ui/src/modules/acl/views/module/pager.vue
deleted file mode 100644
index e1d83d6..0000000
--- a/cmdb-ui/src/modules/acl/views/module/pager.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div>
-    <a-row class="row" type="flex" justify="end">
-      <a-col>
-        <a-space align="end">
-          <a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
-          <a-button class="page-button" size="small">{{ currentPage }}</a-button>
-          <a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
-          <a-dropdown class="dropdown" size="small" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
-            <a-menu slot="overlay">
-              <a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
-                {{ size }}{{ $t('itemsPerPage') }}
-              </a-menu-item>
-            </a-menu>
-            <a-button size="small"> {{ pageSize }}{{ $t('itemsPerPage') }}<a-icon type="down" /> </a-button>
-          </a-dropdown>
-        </a-space>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-export default {
-    props: {
-        currentPage: {
-            type: Number,
-            required: true
-        },
-        pageSize: {
-            type: Number,
-            required: true
-        },
-        pageSizes: {
-            type: Array,
-            required: true
-        },
-        total: {
-            type: Number,
-            required: true
-        },
-        isLoading: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            dropdownIsDisabled: false,
-            prevIsDisabled: true,
-        }
-    },
-    computed: {
-        nextIsDisabled() {
-            return this.isLoading || this.total < this.pageSize
-        }
-    },
-    watch: {
-        isLoading: {
-            immediate: true,
-            handler: function (val) {
-                if (val === true) {
-                    this.dropdownIsDisabled = true
-                    this.prevIsDisabled = true
-                } else {
-                    this.dropdownIsDisabled = false
-                    if (this.currentPage === 1) {
-                        this.prevIsDisabled = true
-                    } else {
-                        this.prevIsDisabled = false
-                    }
-                }
-            }
-        },
-        currentPage: {
-            immediate: true,
-            handler: function (val) {
-                if (val === 1) {
-                    this.prevIsDisabled = true
-                }
-            }
-        }
-    },
-    methods: {
-        handleItemClick(size) {
-            this.$emit('showSizeChange', size)
-        },
-        nextPage() {
-            const pageNum = this.currentPage + 1
-            this.$emit('change', pageNum)
-        },
-        prevPage() {
-            const pageNum = this.currentPage - 1
-            this.$emit('change', pageNum)
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.row{
-    margin-top: 5px;
-    .left-button{
-        padding: 0;
-        width: 24px;
-    }
-    .right-button{
-        padding: 0;
-        width: 24px;
-    }
-    .page-button{
-        padding: 0;
-        width: 24px;
-    }
-}
-</style>
diff --git a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
index bcad4ce..f8a8d39 100644
--- a/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
@@ -79,7 +79,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { searchPermissonHistory } from '@/modules/acl/api/history'
 import debounce from 'lodash/debounce'
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
index d6e55ef..0e5d86d 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
@@ -62,7 +62,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { searchResourceHistory } from '@/modules/acl/api/history'
 export default {
diff --git a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
index b729a98..13ddd6b 100644
--- a/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
@@ -56,7 +56,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { searchResourceHistory } from '@/modules/acl/api/history'
 export default {
diff --git a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
index aecf2b4..8e7e10b 100644
--- a/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
@@ -76,7 +76,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { searchRoleHistory } from '@/modules/acl/api/history'
 export default {
diff --git a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
index 1fa3e6b..53a9fc6 100644
--- a/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
@@ -55,7 +55,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { searchTriggerHistory } from '@/modules/acl/api/history'
 export default {
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
index 2c927c0..3dc7245 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
@@ -81,7 +81,7 @@
 <script>
 import _ from 'lodash'
 import debounce from 'lodash/debounce'
-import Pager from '../../module/pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from '../../module/searchForm.vue'
 import { searchApp } from '@/modules/acl/api/app'
 import { searchPermissonHistory } from '@/modules/acl/api/history'
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
index ad10c80..2df4873 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
@@ -64,7 +64,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from '../../module/pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from '../../module/searchForm.vue'
 import { searchResourceHistory } from '@/modules/acl/api/history'
 import { searchUser } from '@/modules/acl/api/user'
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
index c179a23..d6ce37e 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
@@ -58,7 +58,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from '../../module/pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from '../../module/searchForm.vue'
 import { searchResourceHistory } from '@/modules/acl/api/history'
 import { searchUser } from '@/modules/acl/api/user'
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
index f98e462..ec2d52f 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
@@ -76,7 +76,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from '../../module/pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from '../../module/searchForm.vue'
 import { searchRoleHistory } from '@/modules/acl/api/history'
 import { searchApp } from '@/modules/acl/api/app'
diff --git a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
index fa6cd63..e970127 100644
--- a/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
+++ b/cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
@@ -57,7 +57,7 @@
 
 <script>
 import _ from 'lodash'
-import Pager from '../../module/pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from '../../module/searchForm.vue'
 import { searchTriggerHistory } from '@/modules/acl/api/history'
 import { getTriggers } from '@/modules/acl/api/trigger'
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
index f5d1950..8178e27 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
@@ -102,7 +102,7 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import SearchForm from './searchForm.vue'
 import { getCIHistoryTable, getUsers } from '@/modules/cmdb/api/history'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
deleted file mode 100644
index 11b5705..0000000
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div>
-    <a-row class="row" type="flex" justify="end">
-      <a-col>
-        <a-space align="end">
-          <a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
-          <a-button class="page-button" size="small" >{{ currentPage }}</a-button>
-          <a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
-          <a-dropdown class="dropdown" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
-            <a-menu slot="overlay">
-              <a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
-                {{ size }}{{ $t('cmdb.history.itemsPerPage') }}
-              </a-menu-item>
-            </a-menu>
-            <a-button size="small"> {{ pageSize }}{{ $t('cmdb.history.itemsPerPage') }} <a-icon type="down" /> </a-button>
-          </a-dropdown>
-        </a-space>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script>
-export default {
-    props: {
-        currentPage: {
-            type: Number,
-            required: true
-        },
-        pageSize: {
-            type: Number,
-            required: true
-        },
-        pageSizes: {
-            type: Array,
-            required: true
-        },
-        total: {
-            type: Number,
-            required: true
-        },
-        isLoading: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-            dropdownIsDisabled: false,
-            prevIsDisabled: true,
-        }
-    },
-    computed: {
-        nextIsDisabled() {
-            return this.isLoading || this.total < this.pageSize
-        }
-    },
-    watch: {
-        isLoading: {
-            immediate: true,
-            handler: function (val) {
-                if (val === true) {
-                    this.dropdownIsDisabled = true
-                    this.prevIsDisabled = true
-                } else {
-                    this.dropdownIsDisabled = false
-                    if (this.currentPage === 1) {
-                        this.prevIsDisabled = true
-                    } else {
-                        this.prevIsDisabled = false
-                    }
-                }
-            }
-        },
-        currentPage: {
-            immediate: true,
-            handler: function (val) {
-                if (val === 1) {
-                    this.prevIsDisabled = true
-                }
-            }
-        }
-    },
-    methods: {
-        handleItemClick(size) {
-            this.$emit('showSizeChange', size)
-        },
-        nextPage() {
-            const pageNum = this.currentPage + 1
-            this.$emit('change', pageNum)
-        },
-        prevPage() {
-            const pageNum = this.currentPage - 1
-            this.$emit('change', pageNum)
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.row{
-    margin-top: 5px;
-    .left-button{
-        padding: 0;
-        width: 24px;
-    }
-    .right-button{
-        padding: 0;
-        width: 24px;
-    }
-    .page-button{
-        padding: 0;
-        width: 24px;
-    }
-}
-</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
index 45b954c..540b074 100644
--- a/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
+++ b/cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
@@ -134,7 +134,7 @@
 <script>
 import { mapState } from 'vuex'
 import SearchForm from './searchForm'
-import Pager from './pager.vue'
+import Pager from '@/components/Pager'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
 import { getRelationTable, getUsers } from '@/modules/cmdb/api/history'
 import { getRelationTypes } from '@/modules/cmdb/api/relationType'