解决分页url带参数问题/创建用户增加队列

escheduler-ui/.env

@@ -1,6 +1,6 @@
 
 # 后端接口地址
-API_BASE = http://192.168.220.154:12345
+API_BASE = http://192.168.220.247:12345
 
 # 本地开发如需ip访问项目把"#"号去掉
 #DEV_HOST = 192.168.xx.xx

escheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue

@@ -9,9 +9,9 @@
     </template>
     <template slot="content">
       <template v-if="datasourcesList.length">
-        <m-list :datasources-list="datasourcesList" :page-no="pageNo" :page-size="pageSize"></m-list>
+        <m-list :datasources-list="datasourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
         <div class="page-box">
-          <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+          <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
         </div>
       </template>
       <template v-if="!datasourcesList.length">
@@ -23,11 +23,13 @@
   </m-list-construction>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
   import mCreateDataSource from './_source/createDataSource'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
@@ -37,18 +39,21 @@
       return {
         // loading
         isLoading: true,
-        // Number of pages per page
-        pageSize: 10,
-        // Number of pages
-        pageNo: 1,
         // Total number of articles
         total: 20,
-        // Search value
-        searchVal: '',
         // data sources(List)
-        datasourcesList: []
+        datasourcesList: [],
+        searchParams: {
+          // Number of pages per page
+          pageSize: 10,
+          // Number of pages
+          pageNo: 1,
+          // Search value
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('datasource', ['getDatasourcesListP']),
@@ -67,7 +72,7 @@
             return h(mCreateDataSource, {
               on: {
                 onUpdate () {
-                  self._getDatasourcesListP('false')
+                  self._debounceGET('false')
                   modal.remove()
                 },
                 close () {
@@ -85,27 +90,22 @@
        * page
        */
       _page (val) {
-        this.pageNo = val
+        this.searchParams.pageNo = val
-        this._getDatasourcesListP()
       },
       /**
        * conditions event
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
+        this.searchParams = _.assign(this.searchParams, o)
-        this.pageNo = 1
+        this.searchParams.pageNo = 1
-        this._getDatasourcesListP('false')
       },
       /**
        * get data(List)
        */
-      _getDatasourcesListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getDatasourcesListP({
+        this.getDatasourcesListP(this.searchParams).then(res => {
-          pageSize: this.pageSize,
+          this.datasourcesList = []
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
           this.datasourcesList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -114,9 +114,14 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
-      this._getDatasourcesListP()
     },
     mounted () {
     },

escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue

@@ -27,7 +27,6 @@
   import store from '@/conf/home/store'
   import mConditions from './_source/conditions'
   import mSpin from '@/module/components/spin/spin'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
@@ -61,13 +60,10 @@
     methods: {
       _onQuery (o) {
         this.searchParams = _.assign(this.searchParams, o)
-        setUrlParams(this.searchParams)
+        this.searchParams.pageNo = 1
-        this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       /**
        * get list data

escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue

@@ -30,7 +30,6 @@
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import localStore from '@/module/util/localStorage'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
@@ -62,8 +61,6 @@
        */
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       /**
        * conditions
@@ -71,8 +68,6 @@
       _onConditions (o) {
         this.searchParams.searchVal = o.searchVal
         this.searchParams.pageNo = 1
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       /**
        * get data list

escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue

@@ -162,3 +162,6 @@
     components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }
 </script>
+
+<style lang="scss" rel="stylesheet/scss">
+</style>

escheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue

@@ -28,7 +28,6 @@
   import mSpin from '@/module/components/spin/spin'
   import mCreateProject from './_source/createProject'
   import mNoData from '@/module/components/noData/noData'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -57,8 +56,11 @@
        */
       _onConditions (o) {
         this.searchParams = _.assign(this.searchParams, o)
-        setUrlParams(this.searchParams)
+        this.searchParams.pageNo = 1
-        this._debounceGET()
+      },
+
+      _page (val) {
+        this.searchParams.pageNo = val
       },
       _create (item) {
         let self = this
@@ -86,11 +88,6 @@
       _onUpdate () {
         this._debounceGET()
       },
-      _page (val) {
-        this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
-      },
       _getList (flag) {
         this.isLoading = !flag
         this.getProjectsList(this.searchParams).then(res => {

escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@@ -26,7 +26,6 @@
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
@@ -72,13 +71,10 @@
         if (this.searchParams.taskName) {
           this.searchParams.taskName = ''
         }
-        setUrlParams(this.searchParams)
+        this.searchParams.pageNo = 1
-        this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       /**
        * get list data

escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue

@@ -36,7 +36,6 @@
   import mSpin from '@/module/components/spin/spin'
   import { findComponentDownward } from '@/module/util/'
   import mNoData from '@/module/components/noData/noData'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
@@ -70,17 +69,12 @@
       _onConditions (o) {
         this.searchParams = _.assign(this.searchParams, o)
         this.searchParams.pageNo = 1
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _getList (flag) {
         this.isLoading = !flag
-        this.fileResourcesList = []
         this.getResourcesListP(this.searchParams).then(res => {
           this.fileResourcesList = res.totalList
           this.total = res.total
@@ -92,7 +86,6 @@
       _updateList () {
         this.searchParams.pageNo = 1
         this.searchParams.searchVal = ''
-        setUrlParams(this.searchParams)
         this._debounceGET()
       }
     },

escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/function/index.vue

@@ -33,7 +33,6 @@
   import mCreateUdf from './_source/createUdf'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
@@ -60,13 +59,9 @@
       _onConditions (o) {
         this.searchParams = _.assign(this.searchParams, o)
         this.searchParams.pageNo = 1
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _create () {
         let self = this
@@ -96,13 +91,12 @@
       _updateList () {
         this.searchParams.pageNo = 1
         this.searchParams.searchVal = ''
-        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       _getList (flag) {
         this.isLoading = !flag
-        this.udfFuncList = []
         this.getUdfFuncListP(this.searchParams).then(res => {
+          this.udfFuncList = []
           this.udfFuncList = res.totalList
           this.total = res.total
           this.isLoading = false

escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/index.vue

@@ -33,7 +33,6 @@
   import mSpin from '@/module/components/spin/spin'
   import { findComponentDownward } from '@/module/util/'
   import mNoData from '@/module/components/noData/noData'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
@@ -67,24 +66,19 @@
       _onConditions (o) {
         this.searchParams = _.assign(this.searchParams, o)
         this.searchParams.pageNo = 1
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams(this.searchParams)
-        this._debounceGET()
       },
       _updateList () {
         this.searchParams.pageNo = 1
         this.searchParams.searchVal = ''
-        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       _getList (flag) {
         this.isLoading = !flag
-        this.udfResourcesList = []
         this.getResourcesListP(this.searchParams).then(res => {
+          this.udfResourcesList = []
           this.udfResourcesList = res.totalList
           this.total = res.total
           this.isLoading = false

escheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue

@@ -12,9 +12,9 @@
         </template>
         <template slot="content">
           <template v-if="queueList.length">
-            <m-list :queue-list="queueList" :page-no="pageNo" :page-size="pageSize"></m-list>
+            <m-list :queue-list="queueList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
             <div class="page-box">
-              <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+              <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
             </div>
           </template>
           <template v-if="!queueList.length">
@@ -27,11 +27,13 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import mCreateQueue from './_source/createQueue'
   import mNoData from '@/module/components/noData/noData'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -40,14 +42,17 @@
     name: 'queue-index',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
         total: null,
-        searchVal: '',
         isLoading: true,
-        queueList: []
+        queueList: [],
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('security', ['getQueueListP']),
@@ -55,13 +60,11 @@
        * Query
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
+        this.searchParams = _.assign(this.searchParams, o)
-        this.pageNo = 1
+        this.searchParams.pageNo = 1
-        this._getQueueListP()
       },
       _page (val) {
-        this.pageNo = val
+        this.searchParams.pageNo = val
-        this._getQueueListP()
       },
       _create (item) {
         let self = this
@@ -75,7 +78,7 @@
             return h(mCreateQueue, {
               on: {
                 onUpdate () {
-                  self._getQueueListP('false')
+                  self._debounceGET('false')
                   modal.remove()
                 },
                 close () {
@@ -89,13 +92,10 @@
           }
         })
       },
-      _getQueueListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getQueueListP({
+        this.getQueueListP(this.searchParams).then(res => {
-          pageSize: this.pageSize,
+          this.queueList = []
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
           this.queueList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -104,9 +104,14 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
-      this._getQueueListP()
     },
     mounted () {
 

escheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue

@@ -157,19 +157,19 @@
     watch: {
     },
     created () {
-
-    },
-    mounted () {
       this._getQueueList().then(res => {
         if (this.item) {
           this.$nextTick(() => {
-            this.queueId = _.filter(this.queueList, v => v.id === this.item.queueId)[0]
+            this.queueId = _.find(this.queueList, ['id', this.item.queueId])
           })
           this.tenantCode = this.item.tenantCode
           this.tenantName = this.item.tenantName
           this.desc = this.item.desc
         }
       })
+    },
+    mounted () {
+
     },
     components: { mPopup, mListBoxF }
   }

escheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue

@@ -12,9 +12,9 @@
         </template>
         <template slot="content">
           <template v-if="tenementList.length">
-            <m-list :tenement-list="tenementList" :page-no="pageNo" :page-size="pageSize"></m-list>
+            <m-list :tenement-list="tenementList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
             <div class="page-box">
-              <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+              <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
             </div>
           </template>
           <template v-if="!tenementList.length">
@@ -27,11 +27,13 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import mCreateTenement from './_source/createTenement'
   import mNoData from '@/module/components/noData/noData'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -40,14 +42,17 @@
     name: 'tenement-index',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
         total: null,
-        searchVal: '',
         isLoading: true,
-        tenementList: []
+        tenementList: [],
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('security', ['getTenantListP']),
@@ -55,13 +60,11 @@
        * Query
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
+        this.searchParams = _.assign(this.searchParams, o)
-        this.pageNo = 1
+        this.searchParams.pageNo = 1
-        this._getTenantListP()
       },
       _page (val) {
-        this.pageNo = val
+        this.searchParams.pageNo = val
-        this._getTenantListP()
       },
       _create (item) {
         let self = this
@@ -75,7 +78,7 @@
             return h(mCreateTenement, {
               on: {
                 onUpdate () {
-                  self._getTenantListP('false')
+                  self._debounceGET('false')
                   modal.remove()
                 },
                 close () {
@@ -89,13 +92,10 @@
           }
         })
       },
-      _getTenantListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getTenantListP({
+        this.getTenantListP(this.searchParams).then(res => {
-          pageSize: this.pageSize,
+          this.tenementList = []
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
           this.tenementList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -104,12 +104,16 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
-      this._getTenantListP()
     },
     mounted () {
-
     },
     components: { mSecondaryMenu, mList, mListConstruction, mConditions, mSpin, mNoData }
   }

escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue

@@ -39,6 +39,19 @@
             </x-select>
           </template>
         </m-list-box-f>
+        <m-list-box-f>
+          <template slot="name"><b>*</b>{{$t('Queue')}}</template>
+          <template slot="content">
+            <x-select v-model="queueName">
+              <x-option
+                      v-for="city in queueList"
+                      :key="city.id"
+                      :value="city"
+                      :label="city.code">
+              </x-option>
+            </x-select>
+          </template>
+        </m-list-box-f>
         <m-list-box-f>
           <template slot="name"><b>*</b>{{$t('Email')}}</template>
           <template slot="content">
@@ -77,9 +90,11 @@
       return {
         store,
         router,
+        queueList: [],
         userName: '',
         userPassword: '',
         tenantId: {},
+        queueName: {},
         email: '',
         phone: '',
         tenantList: [],
@@ -144,6 +159,22 @@
 
         return true
       },
+      _getQueueList () {
+        return new Promise((resolve, reject) => {
+          this.store.dispatch('security/getQueueList').then(res => {
+            this.queueList = _.map(res, v => {
+              return {
+                id: v.id,
+                code: v.queueName
+              }
+            })
+            this.$nextTick(() => {
+              this.queueName = this.queueList[0]
+            })
+            resolve()
+          })
+        })
+      },
       _getTenantList () {
         return new Promise((resolve, reject) => {
           this.store.dispatch('security/getTenantList').then(res => {
@@ -167,6 +198,7 @@
           userPassword: this.userPassword,
           tenantId: this.tenantId.id,
           email: this.email,
+          queue: this.queueName.code,
           phone: this.phone
         }
         if (this.item) {
@@ -188,13 +220,16 @@
     created () {
       // Administrator gets tenant list
       if (this.isADMIN) {
-        this._getTenantList().then(res => {
+        Promise.all([this._getQueueList(), this._getTenantList()]).then(() => {
           if (this.item) {
             this.userName = this.item.userName
             this.userPassword = ''
             this.email = this.item.email
             this.phone = this.item.phone
-            this.tenantId = _.filter(this.tenantList, v => v.id === this.item.tenantId)[0]
+            this.tenantId = _.find(this.tenantList, ['id', this.item.tenantId])
+            this.$nextTick(() => {
+              this.queueName = _.find(this.queueList, ['code', this.item.queue])
+            })
           }
         })
       } else {
@@ -204,10 +239,12 @@
           this.email = this.item.email
           this.phone = this.item.phone
           this.tenantId.id = this.item.tenantId
+          this.queueName = { queue: this.item.queue }
         }
       }
     },
     mounted () {
+
     },
     components: { mPopup, mListBoxF }
   }

escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue

@@ -12,6 +12,9 @@
           <th>
             <span>{{$t('Tenant')}}</span>
           </th>
+          <th>
+            <span>{{$t('Queue')}}</span>
+          </th>
           <th>
             <span>{{$t('Email')}}</span>
           </th>
@@ -38,6 +41,7 @@
             </span>
           </td>
           <td><span>{{item.tenantName || '-'}}</span></td>
+          <td><span>{{item.queue || '-'}}</span></td>
           <td>
             <span>{{item.email || '-'}}</span>
           </td>

escheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue

@@ -12,9 +12,9 @@
         </template>
         <template slot="content">
           <template v-if="userList.length">
-            <m-list :user-list="userList" :page-no="pageNo" :page-size="pageSize"></m-list>
+            <m-list :user-list="userList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
             <div class="page-box">
-              <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+              <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
             </div>
           </template>
           <template v-if="!userList.length">
@@ -27,11 +27,13 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mCreateUser from './_source/createUser'
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -40,14 +42,17 @@
     name: 'users-index',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
         total: null,
-        searchVal: '',
         isLoading: true,
-        userList: []
+        userList: [],
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('security', ['getUsersList']),
@@ -55,13 +60,11 @@
        * Query
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
+        this.searchParams = _.assign(this.searchParams, o)
-        this.pageNo = 1
+        this.searchParams.pageNo = 1
-        this._getUsersListP()
       },
       _page (val) {
-        this.pageNo = val
+        this.searchParams.pageNo = val
-        this._getUsersListP()
       },
       _create (item) {
         let self = this
@@ -75,7 +78,7 @@
             return h(mCreateUser, {
               on: {
                 onUpdate () {
-                  self._getUsersListP('false')
+                  self._debounceGET('false')
                   modal.remove()
                 },
                 close () {
@@ -89,13 +92,10 @@
           }
         })
       },
-      _getUsersListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getUsersList({
+        this.getUsersList(this.searchParams).then(res => {
-          pageSize: this.pageSize,
+          this.userList = []
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
           this.userList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -104,9 +104,14 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
-      this._getUsersListP()
     },
     mounted () {
     },

escheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue

@@ -12,10 +12,9 @@
         </template>
         <template slot="content">
           <template v-if="alertgroupList.length">
-            <m-list :alertgroup-list="alertgroupList" :page-no="pageNo" :page-size="pageSize"></m-list>
+            <m-list :alertgroup-list="alertgroupList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
             <div class="page-box">
-              <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
+              <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page"></x-page>
-
             </div>
           </template>
           <template v-if="!alertgroupList.length">
@@ -28,11 +27,13 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   import mSpin from '@/module/components/spin/spin'
   import mCreateWarning from './_source/createWarning'
   import mNoData from '@/module/components/noData/noData'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -41,14 +42,17 @@
     name: 'warning-groups-index',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
         total: null,
-        searchVal: '',
         isLoading: false,
-        alertgroupList: []
+        alertgroupList: [],
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('security', ['getAlertgroupP']),
@@ -56,13 +60,11 @@
        * Inquire
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
+        this.searchParams = _.assign(this.searchParams, o)
-        this.pageNo = 1
+        this.searchParams.pageNo = 1
-        this._getAlertgroupP()
       },
       _page (val) {
-        this.pageNo = val
+        this.searchParams.pageNo = val
-        this._getAlertgroupP()
       },
       _create (item) {
         let self = this
@@ -76,7 +78,7 @@
             return h(mCreateWarning, {
               on: {
                 onUpdate () {
-                  self._getAlertgroupP('false')
+                  self._debounceGET('false')
                   modal.remove()
                 },
                 close () {
@@ -90,13 +92,10 @@
           }
         })
       },
-      _getAlertgroupP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getAlertgroupP({
+        this.getAlertgroupP(this.searchParams).then(res => {
-          pageSize: this.pageSize,
+          this.alertgroupList = []
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
           this.alertgroupList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -105,9 +104,14 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
-      this._getAlertgroupP()
     },
     mounted () {
     },

escheduler-ui/src/js/module/mixin/listUrlParamHandle.js

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import _ from 'lodash'
+import { setUrlParams } from '@/module/util/routerUtil'
 /**
  * Mainly used for data list paging url param handle
  * @param _getList => api function(required)
@@ -22,9 +23,10 @@ import _ from 'lodash'
 export default {
   watch: {
     // watch pageNo
-    'searchParams.pageNo': {
+    'searchParams': {
       deep: true,
       handler () {
+        setUrlParams(this.searchParams)
         this._debounceGET()
       }
     }