refactor(ui):extract pager components

cmdb-ui/src/components/Pager/index.js

@@ -0,0 +1,2 @@
+import Pager from './index.vue'
+export default Pager

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>
+  

cmdb-ui/src/modules/acl/views/module/pager.vue

@@ -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>

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'

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 {

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 {

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 {

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 {

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'

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'

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'

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'

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'

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'

cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue

@@ -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>

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'