彻底优化分页 url带参查询 保留url参数

escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue

@@ -255,7 +255,7 @@
        */
       _seeHistory () {
         this.self.$router.push({
-          name: 'task-instance-list',
+          name: 'task-instance',
           query: {
             processInstanceId: this.self.$route.params.id,
             taskName: this.backfillItem.name

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

@@ -333,8 +333,16 @@
       padding: 0 20px;
     }
     .content-p {
-      min-width: 500px;
+      min-width: 820px;
       min-height: 100px;
+      .list-box-f {
+        .text {
+          width: 166px;
+        }
+        .cont {
+          width: calc(100% - 186px);
+        }
+      }
     }
   }
 </style>

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

@@ -29,6 +29,7 @@
   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'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
@@ -53,6 +54,7 @@
         }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {
       config: String
     },
@@ -83,44 +85,21 @@
       },
       _onUpdate () {
         this._debounceGET()
-      },
-      /**
-       * Anti-shake request interface
-       * @desc Prevent function from being called multiple times
-       */
-      _debounceGET: _.debounce(function (flag) {
-        this._getList(flag)
-      }, 100, {
-        'leading': false,
-        'trailing': true
-      })
+      }
     },
     watch: {
       // router
       '$route' (a) {
         // url no params get instance list
         if (_.isEmpty(a.query)) {
-          this.searchParams.pageNo = 1
           this.searchParams.processInstanceId = ''
-        } else {
-          this.searchParams.pageNo = a.query.pageNo || 1
-        }
-      },
-      'searchParams.pageNo': {
-        deep: true,
-        handler () {
-          this._debounceGET()
         }
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
       }
     },
     created () {
-      // Routing parameter merging
-      if (!_.isEmpty(this.$route.query)) {
-        this.searchParams = _.assign(this.searchParams, this.$route.query)
-      }
     },
     mounted () {
-      this._debounceGET()
     },
     components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }

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

@@ -198,11 +198,11 @@
           if (this.item.crontab) {
             api = 'dag/updateSchedule'
             searchParams.id = this.item.id
-            msg = '编辑成功！不要忘记上线'
+            msg = `${i18n.$t('Edit')}${i18n.$t('success')},${i18n.$t('Please go online')}`
           } else {
             api = 'dag/createSchedule'
             searchParams.processDefinitionId = this.item.id
-            msg = '创建成功'
+            msg = `${i18n.$t('Create')}${i18n.$t('success')}`
           }
 
           this.store.dispatch(api, searchParams).then(res => {

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

@@ -32,6 +32,7 @@
   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'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -44,15 +45,14 @@
         processListP: [],
         isLoading: true,
         searchParams: {
-          // 分页条数
           pageSize: 10,
-          // 分页
           pageNo: 1,
-          // 查询名称
-          searchVal: ''
+          searchVal: '',
+          userId: ''
         }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {
     },
     methods: {
@@ -77,15 +77,9 @@
       /**
        * get data list
        */
-      _getProcessListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getProcessListP({
-          pageSize: this.searchParams.pageSize,
-          pageNo: this.searchParams.pageNo,
-          searchVal: this.searchParams.searchVal,
-          userId: this.$route.query.userId || ''
-        }).then(res => {
-          setUrlParams({ pageNo: this.pageNo })
+        this.getProcessListP(this.searchParams).then(res => {
           this.processListP = []
           this.processListP = res.totalList
           this.total = res.total
@@ -96,48 +90,20 @@
       },
       _onUpdate () {
         this._debounceGET('false')
-      },
-      /**
-       * Anti-shake request interface
-       * @desc Prevent function from being called multiple times
-       */
-      _debounceGET: _.debounce(function (flag) {
-        this._getProcessListP(flag)
-      }, 100, {
-        'leading': false,
-        'trailing': true
-      })
+      }
     },
     watch: {
       '$route' (a) {
         // url no params get instance list
-        if (_.isEmpty(a.query)) {
-          this.searchParams.pageNo = 1
-        } else {
-          this.searchParams.pageNo = a.query.pageNo || 1
-        }
-      },
-      'searchParams': {
-        deep: true,
-        handler () {
-          this._debounceGET()
-        }
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
       }
     },
     created () {
       localStore.removeItem('subProcessId')
-
-      // Routing parameter merging
-      if (!_.isEmpty(this.$route.query)) {
-        this.searchParams = _.assign(this.searchParams, this.$route.query)
-      }
     },
     mounted () {
-      this._debounceGET()
     },
     components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }
 </script>
 
-<style lang="scss" rel="stylesheet/scss">
-</style>

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

@@ -122,7 +122,7 @@
       },
       _goTask (name) {
         this.$router.push({
-          name: 'task-instance-list',
+          name: 'task-instance',
           query: {
             stateType: _.find(stateType, ['label', name])['code'],
             startDate: this.scheduleTime[0],

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

@@ -3,33 +3,6 @@
 </template>
 <script>
   export default {
-    name: 'process-instance-index',
-    data () {
-      return {
-      }
-    },
-    props: {},
-    methods: {
-    },
-    watch: {
-    },
-    created () {
-    },
-    mounted () {
-
-    },
-    updated () {
-    },
-    beforeDestroy () {
-
-    },
-    destroyed () {
-    },
-    computed: {
-    },
-    components: { }
+    name: 'process-instance-index'
   }
 </script>
-
-<style lang="scss" rel="stylesheet/scss">
-</style>

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

@@ -162,6 +162,3 @@
     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

@@ -9,9 +9,9 @@
     </template>
     <template slot="content">
       <template v-if="projectsList.length">
-        <m-list :projects-list="projectsList" @on-update="_onUpdate" :page-no="pageNo" :page-size="pageSize"></m-list>
+        <m-list :projects-list="projectsList" @on-update="_onUpdate" :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="!projectsList.length">
@@ -22,26 +22,33 @@
   </m-list-construction>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
-  import mListConstruction from '@/module/components/listConstruction/listConstruction'
-  import mConditions from '@/module/components/conditions/conditions'
   import mList from './_source/list'
-  import mCreateProject from './_source/createProject'
   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'
+
 
   export default {
     name: 'projects-list',
     data () {
       return {
-        pageSize: 10,
-        pageNo: 1,
         total: null,
-        searchVal: '',
         projectsList: [],
-        isLoading: true
+        isLoading: true,
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('projects', ['getProjectsList']),
@@ -49,9 +56,9 @@
        * Inquire
        */
       _onConditions (o) {
-        this.searchVal = o.searchVal
-        this.pageNo = 1
-        this._getProjectsList()
+        this.searchParams = _.assign(this.searchParams, o)
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _create (item) {
         let self = this
@@ -65,7 +72,7 @@
             return h(mCreateProject, {
               on: {
                 onUpdate () {
-                  self._getProjectsList()
+                  self._debounceGET()
                   modal.remove()
                 }
               },
@@ -77,19 +84,17 @@
         })
       },
       _onUpdate () {
-        this._getProjectsList()
+        this._debounceGET()
       },
       _page (val) {
-        this.pageNo = val
-        this._getProjectsList()
+        this.searchParams.pageNo = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
-      _getProjectsList (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getProjectsList({
-          pageSize: this.pageSize,
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
+        this.getProjectsList(this.searchParams).then(res => {
+          this.projectsList = []
           this.projectsList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -98,11 +103,16 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
     },
     mounted () {
-      this._getProjectsList()
     },
     components: { mListConstruction, mSpin, mConditions, mList, mCreateProject, mNoData }
   }

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

@@ -28,6 +28,7 @@
   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'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
   import mInstanceConditions from '@/conf/home/pages/projects/pages/_source/instanceConditions'
@@ -59,6 +60,7 @@
         }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('dag', ['getTaskInstanceList']),
@@ -81,7 +83,7 @@
       /**
        * get list data
        */
-      _getTaskInstanceList (flag) {
+      _getList (flag) {
         this.isLoading = !flag
         this.getTaskInstanceList(this.searchParams).then(res => {
           this.taskInstanceList = []
@@ -91,44 +93,21 @@
         }).catch(e => {
           this.isLoading = false
         })
-      },
-      /**
-       * Anti-shake request interface
-       * @desc Prevent function from being called multiple times
-       */
-      _debounceGET: _.debounce(function (flag) {
-        this._getTaskInstanceList(flag)
-      }, 100, {
-        'leading': false,
-        'trailing': true
-      })
+      }
     },
     watch: {
       // router
       '$route' (a) {
         // url no params get instance list
         if (_.isEmpty(a.query)) {
-          this.searchParams.pageNo = 1
           this.searchParams.processInstanceId = ''
-        } else {
-          this.searchParams.pageNo = a.query.pageNo || 1
-        }
-      },
-      'searchParams': {
-        deep: true,
-        handler () {
-          this._debounceGET()
         }
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
       }
     },
     created () {
-      // Routing parameter merging
-      if (!_.isEmpty(this.$route.query)) {
-        this.searchParams = _.assign(this.searchParams, this.$route.query)
-      }
     },
     mounted () {
-      this._debounceGET()
     },
     components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }

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

@@ -14,10 +14,10 @@
       </template>
       <template slot="content">
         <template v-if="fileResourcesList.length">
-          <m-list :file-resources-list="fileResourcesList" :page-no="pageNo" :page-size="pageSize">
+          <m-list :file-resources-list="fileResourcesList" :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="!fileResourcesList.length">
@@ -30,11 +30,14 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   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'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -43,14 +46,18 @@
     name: 'resource-list-index-FILE',
     data () {
       return {
+        total: null,
+        isLoading: false,
+        fileResourcesList: [],
+        searchParams: {
           pageSize: 10,
           pageNo: 1,
-        total: null,
           searchVal: '',
-        isLoading: false,
-        fileResourcesList: []
+          type: 'FILE'
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('resource', ['getResourcesListP']),
@@ -61,22 +68,20 @@
         findComponentDownward(this.$root, 'roof-nav')._fileUpdate('FILE')
       },
       _onConditions (o) {
-        this.searchVal = o.searchVal
-        this.pageNo = 1
-        this._getResourcesList()
+        this.searchParams = _.assign(this.searchParams, o)
+        this.searchParams.pageNo = 1
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _page (val) {
-        this.pageNo = val
-        this._getResourcesList()
+        this.searchParams.pageNo = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
-      _getResourcesList (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getResourcesListP({
-          pageSize: this.pageSize,
-          pageNo: this.pageNo,
-          searchVal: this.searchVal,
-          type: 'FILE'
-        }).then(res => {
+        this.fileResourcesList = []
+        this.getResourcesListP(this.searchParams).then(res => {
           this.fileResourcesList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -85,25 +90,22 @@
         })
       },
       _updateList () {
-        this.pageSize = 10
-        this.pageNo = 1
-        this.searchVal = ''
-        this._getResourcesList()
-      },
-      _routerView () {
-        let name = this.$route.name
-        if (name === 'resource-file-details') {
-          return true
-        } else {
-          return false
+        this.searchParams.pageNo = 1
+        this.searchParams.searchVal = ''
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       }
+    },
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
       }
     },
-    watch: {},
     created () {
     },
     mounted () {
-      this._getResourcesList()
     },
     components: { mSecondaryMenu, mListConstruction, mConditions, mList, mSpin, mNoData }
   }

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

@@ -11,10 +11,10 @@
       </template>
       <template slot="content">
         <template v-if="udfFuncList.length">
-          <m-list :udf-func-list="udfFuncList" :page-no="pageNo" :page-size="pageSize" @on-update="_updateList">
+          <m-list :udf-func-list="udfFuncList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize" @on-update="_updateList">
           </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="!udfFuncList.length">
@@ -27,37 +27,46 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   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'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
+
   export default {
     name: 'udf-function-index',
     data () {
       return {
+        total: null,
+        isLoading: false,
+        udfFuncList: [],
+        searchParams: {
           pageSize: 10,
           pageNo: 1,
-        total: 20,
-        searchVal: '',
-        isLoading: false,
-        udfFuncList: []
+          searchVal: ''
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('resource', ['getUdfFuncListP']),
       _onConditions (o) {
-        this.searchVal = o.searchVal
-        this.pageNo = 1
-        this._getUdfFuncListP()
+        this.searchParams = _.assign(this.searchParams, o)
+        this.searchParams.pageNo = 1
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _page (val) {
-        this.pageNo = val
-        this._getUdfFuncListP()
+        this.searchParams.pageNo = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _create () {
         let self = this
@@ -85,18 +94,15 @@
         })
       },
       _updateList () {
-        this.pageSize = 10
-        this.pageNo = 1
-        this.searchVal = ''
-        this._getUdfFuncListP()
+        this.searchParams.pageNo = 1
+        this.searchParams.searchVal = ''
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
-      _getUdfFuncListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getUdfFuncListP({
-          pageSize: this.pageSize,
-          pageNo: this.pageNo,
-          searchVal: this.searchVal
-        }).then(res => {
+        this.udfFuncList = []
+        this.getUdfFuncListP(this.searchParams).then(res => {
           this.udfFuncList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -105,11 +111,16 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
     },
     mounted () {
-      this._getUdfFuncListP()
     },
     components: { mSecondaryMenu, mListConstruction, mConditions, mList, mSpin, mCreateUdf, mNoData }
   }

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

@@ -11,10 +11,10 @@
     </template>
     <template slot="content">
       <template v-if="udfResourcesList.length">
-        <m-list :udf-resources-list="udfResourcesList" :page-no="pageNo" :page-size="pageSize">
+        <m-list :udf-resources-list="udfResourcesList" :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="!udfResourcesList.length">
@@ -27,11 +27,14 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
   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'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -40,14 +43,18 @@
     name: 'resource-list-index-UDF',
     data () {
       return {
+        total: null,
+        isLoading: false,
+        udfResourcesList: [],
+        searchParams: {
           pageSize: 10,
           pageNo: 1,
-        total: null,
           searchVal: '',
-        isLoading: false,
-        udfResourcesList: []
+          type: 'UDF'
+        }
       }
     },
+    mixins: [listUrlParamHandle],
     props: {},
     methods: {
       ...mapActions('resource', ['getResourcesListP']),
@@ -58,28 +65,26 @@
         findComponentDownward(this.$root, 'roof-nav')._fileUpdate('UDF')
       },
       _onConditions (o) {
-        this.searchVal = o.searchVal
-        this.pageNo = 1
-        this._getResourcesListP()
+        this.searchParams = _.assign(this.searchParams, o)
+        this.searchParams.pageNo = 1
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _page (val) {
-        this.pageNo = val
-        this._getResourcesListP()
+        this.searchParams.pageNo = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       _updateList () {
-        this.pageSize = 10
-        this.pageNo = 1
-        this.searchVal = ''
-        this._getResourcesListP()
+        this.searchParams.pageNo = 1
+        this.searchParams.searchVal = ''
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
-      _getResourcesListP (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getResourcesListP({
-          pageSize: this.pageSize,
-          pageNo: this.pageNo,
-          searchVal: this.searchVal,
-          type: 'UDF'
-        }).then(res => {
+        this.udfResourcesList = []
+        this.getResourcesListP(this.searchParams).then(res => {
           this.udfResourcesList = res.totalList
           this.total = res.total
           this.isLoading = false
@@ -88,11 +93,16 @@
         })
       }
     },
-    watch: {},
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
     created () {
     },
     mounted () {
-      this._getResourcesListP()
     },
     components: { mSecondaryMenu, mListConstruction, mConditions, mList, mSpin, mNoData }
   }

escheduler-ui/src/js/conf/home/router/index.js

@@ -177,7 +177,7 @@ const router = new Router({
           name: 'history-task-record',
           component: resolve => require(['../pages/projects/pages/historyTaskRecord'], resolve),
           meta: {
-            title: `History task record`
+            title: `${i18n.$t('History task record')}`
           }
 
         }

escheduler-ui/src/js/module/components/listBoxF/listBoxF.vue

@@ -21,7 +21,7 @@
       margin-bottom: 0;
     }
     .text {
-      width: 120px;
+      width: 144px;
       float: left;
       text-align: right;
       line-height: 32px;
@@ -32,7 +32,7 @@
       }
     }
     .cont {
-      width: calc(100% - 140px);
+      width: calc(100% - 162px);
       float: left;
       .textarea-content {
         .v-input {

escheduler-ui/src/js/module/components/popup/popup.vue

@@ -82,7 +82,7 @@
       padding: 0 20px;
     }
     .content-p {
-      min-width: 500px;
+      min-width: 520px;
       min-height: 100px;
     }
   }

escheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -408,5 +408,6 @@ export default {
   'Create queue': 'Create queue',
   'Edit queue': 'Edit queue',
   'Datasource manage': 'Datasource',
-  'History task record': 'History task record'
+  'History task record': 'History task record',
+  'Please go online': 'Please go online'
 }

escheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -407,5 +407,6 @@ export default {
   'Create queue': '创建队列',
   'Edit queue': '编辑队列',
   'Datasource manage': '数据源中心',
-  'History task record': '历史任务记录'
+  'History task record': '历史任务记录',
+  'Please go online': '不要忘记上线'
 }

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

@@ -29,8 +29,6 @@ export default {
   created () {
     this.isDetails = this.store.state.dag.isDetails
   },
-  methods: {
-  },
   computed: {
     _isDetails () {
       return this.isDetails ? 'icon-disabled' : ''

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

@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import _ from 'lodash'
+/**
+ * Mainly used for data list paging url param handle
+ * @param _getList => api function(required)
+ */
+export default {
+  watch: {
+    // watch pageNo
+    'searchParams.pageNo': {
+      deep: true,
+      handler () {
+        this._debounceGET()
+      }
+    }
+  },
+  created () {
+    // Routing parameter merging
+    if (!_.isEmpty(this.$route.query)) {
+      this.searchParams = _.assign(this.searchParams, this.$route.query)
+    }
+  },
+  mounted () {
+    this._debounceGET()
+  },
+  methods: {
+    /**
+     * Anti-shake request interface
+     * @desc Prevent function from being called multiple times
+     */
+    _debounceGET: _.debounce(function (flag) {
+      this._getList(flag)
+    }, 100, {
+      'leading': false,
+      'trailing': true
+    })
+  }
+}