From 3c5015e69171bb084bdb1e8db3e6085b6aa7e1e6 Mon Sep 17 00:00:00 2001
From: gongzijian <gongzijian@analysys.com.cn>
Date: Tue, 16 Apr 2019 15:18:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BC=98=E5=8C=96/=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=9B=AE=E5=BD=95=E4=BC=98=E5=8C=96/=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=8E=86=E5=8F=B2=E4=BB=BB=E5=8A=A1=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_source/formModel/_source/selectInput.vue |   2 +-
 .../pages/dag/_source/formModel/formModel.vue |   8 +-
 .../pages/dag/_source/plugIn/jsPlumbHandle.js |   2 +-
 .../home/pages/dag/_source/plugIn/util.js     |  18 +-
 .../instanceConditions}/common.js             |   0
 .../instanceConditions/index.vue}             |  83 +++-----
 .../taskRecordList/_source/conditions.vue     | 141 +++++++++++++
 .../taskRecordList}/_source/list.vue          |   0
 .../list => _source/taskRecordList}/index.vue |  82 ++++----
 .../pages/definition/pages/list/index.vue     |   8 +-
 .../pages/historyTaskRecord/index.vue         |  18 ++
 .../pages/index/_source/projectChart.vue      |  14 +-
 .../pages/instance/pages/list/index.vue       |  15 +-
 .../{pages/list => }/_source/list.vue         |   0
 .../projects/pages/taskInstance/index.vue     | 133 +++++++++++-
 .../pages/projects/pages/taskRecord/index.vue |  14 +-
 .../pages/taskRecord/pages/list/index.vue     | 195 ------------------
 .../pages/file/pages/list/_source/rename.vue  |   2 +-
 .../udf/pages/resource/_source/rename.vue     |   2 +-
 .../pages/queue/_source/createQueue.vue       |  14 +-
 .../security/pages/users/_source/list.vue     |   4 +-
 .../src/js/conf/home/router/index.js          |  44 ++--
 .../src/js/conf/home/store/dag/actions.js     |  12 ++
 .../js/conf/home/store/security/actions.js    |  10 +-
 .../components/fileUpdate/fileUpdate.vue      |   2 +-
 .../module/components/secondaryMenu/menu.js   |   9 +-
 .../src/js/module/i18n/locale/en_US.js        |   9 +-
 .../src/js/module/i18n/locale/zh_CN.js        |  13 +-
 escheduler-ui/src/sass/common/index.scss      |   2 +-
 29 files changed, 458 insertions(+), 398 deletions(-)
 rename escheduler-ui/src/js/conf/home/pages/projects/pages/{instance/pages/list/_source => _source/instanceConditions}/common.js (100%)
 rename escheduler-ui/src/js/conf/home/pages/projects/pages/{instance/pages/list/_source/conditions.vue => _source/instanceConditions/index.vue} (56%)
 create mode 100644 escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
 rename escheduler-ui/src/js/conf/home/pages/projects/pages/{taskRecord/pages/list => _source/taskRecordList}/_source/list.vue (100%)
 rename escheduler-ui/src/js/conf/home/pages/projects/pages/{taskInstance/pages/list => _source/taskRecordList}/index.vue (65%)
 create mode 100644 escheduler-ui/src/js/conf/home/pages/projects/pages/historyTaskRecord/index.vue
 rename escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/{pages/list => }/_source/list.vue (100%)
 delete mode 100644 escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/index.vue

diff --git a/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue b/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
index e04e4854d2..b7875a6fde 100644
--- a/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
+++ b/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
@@ -1,6 +1,6 @@
 <template>
   <x-select
-          style="width: 170px;"
+          style="width: 157px;"
           :disabled="isDetails"
           @on-change="_onChange"
           v-model="value">
diff --git a/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 2d40f42f9c..b16e21780c 100644
--- a/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/escheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -178,7 +178,7 @@
   import mShell from './tasks/shell'
   import mSpark from './tasks/spark'
   import mPython from './tasks/python'
-  import { isNameExDag,rtBantpl } from './../plugIn/util'
+  import { isNameExDag, rtBantpl } from './../plugIn/util'
   import JSP from './../plugIn/jsPlumbHandle'
   import mProcedure from './tasks/procedure'
   import mDependent from './tasks/dependent'
@@ -366,7 +366,7 @@
       /**
        *  set run flag
        */
-      _setRunFlag(){
+      _setRunFlag () {
         let dom = $(`#${this.id}`).find('.ban-p')
         dom.html('')
         if (this.runFlag === 'FORBIDDEN') {
@@ -528,10 +528,10 @@
       position: relative;
       margin-bottom: 10px;
       .text-box {
-        width: 110px;
+        width: 112px;
         float: left;
         text-align: right;
-        margin-right: 10px;
+        margin-right: 8px;
         >span {
           font-size: 14px;
           color: #777;
diff --git a/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 95b3daaa96..5fb2cd51fd 100644
--- a/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -193,7 +193,7 @@ JSP.prototype.jsonHandle = function ({ largeJson, locations }) {
       targetarr: locations[v.id]['targetarr'],
       isAttachment: this.config.isAttachment,
       taskType: v.type,
-      runFlag:v.runFlag
+      runFlag: v.runFlag
     }))
 
     // contextmenu event
diff --git a/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
index 7074d3b478..cda59ba1e7 100644
--- a/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/escheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@@ -44,20 +44,20 @@ const rtBantpl = () => {
 /**
  * return node html
  */
-const rtTasksTpl = ({ id, name, x, y, targetarr, isAttachment, taskType,runFlag }) => {
+const rtTasksTpl = ({ id, name, x, y, targetarr, isAttachment, taskType, runFlag }) => {
   let tpl = ``
   tpl += `<div class="w jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected ${isAttachment ? 'jtk-ep' : ''}" data-targetarr="${targetarr || ''}" data-tasks-type="${taskType}" id="${id}" style="left: ${x}px; top: ${y}px;">`
   tpl += `<div>`
-    tpl += `<div class="state-p"></div>`
-    tpl += `<div class="icos icos-${taskType}"></div>`
-    tpl += `<span class="name-p">${name}</span>`
+  tpl += `<div class="state-p"></div>`
+  tpl += `<div class="icos icos-${taskType}"></div>`
+  tpl += `<span class="name-p">${name}</span>`
   tpl += `</div>`
   tpl += `<div class="ep"></div>`
-    tpl += `<div class="ban-p">`
-    if (runFlag === 'FORBIDDEN') {
-      tpl += rtBantpl()
-    }
-    tpl += `</div>`
+  tpl += `<div class="ban-p">`
+  if (runFlag === 'FORBIDDEN') {
+    tpl += rtBantpl()
+  }
+  tpl += `</div>`
   tpl += `</div>`
 
   return tpl
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/common.js b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/common.js
similarity index 100%
rename from escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/common.js
rename to escheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/common.js
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/conditions.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
similarity index 56%
rename from escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/conditions.vue
rename to escheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
index fb5f4772ae..33d17967c1 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/conditions.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue
@@ -11,7 +11,7 @@
                 type="daterange"
                 format="YYYY-MM-DD HH:mm:ss"
                 placement="bottom-end"
-                v-model="datepicker"
+                :value="[searchParams.startDate,searchParams.endDate]"
                 :panelNum="2">
           <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
             <i slot="suffix"
@@ -24,7 +24,7 @@
         </x-datepicker>
       </div>
       <div class="list">
-        <x-select style="width: 160px;" @on-change="_onChangeState" :value="stateType" >
+        <x-select style="width: 160px;" @on-change="_onChangeState" :value="searchParams.stateType" >
           <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 160px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
           </x-input>
           <x-option
@@ -36,10 +36,10 @@
         </x-select>
       </div>
       <div class="list">
-        <x-input v-model="host" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
+        <x-input v-model="searchParams.host" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
       </div>
       <div class="list">
-        <x-input v-model="searchVal" style="width: 200px;" size="small" :placeholder="$t('name')"></x-input>
+        <x-input v-model="searchParams.searchVal" style="width: 200px;" size="small" :placeholder="$t('name')"></x-input>
       </div>
     </template>
   </m-conditions>
@@ -47,91 +47,60 @@
 <script>
   import _ from 'lodash'
   import { stateType } from './common'
-  import { setUrlParams } from '@/module/util/routerUtil'
   import mConditions from '@/module/components/conditions/conditions'
   export default {
-    name: 'conditions',
+    name: 'instance-conditions',
     data () {
       return {
         // state(list)
         stateTypeList: stateType,
-        // state
-        stateType: '',
-        // start date
-        startDate: '',
-        // end date
-        endDate: '',
-        // search value
-        searchVal: '',
-        // host
-        host: '',
-        // datepicker plugin
-        datepicker: []
+        searchParams: {
+          // state
+          stateType: '',
+          // start date
+          startDate: '',
+          // end date
+          endDate: '',
+          // search value
+          searchVal: '',
+          // host
+          host: ''
+        }
       }
     },
     props: {},
     methods: {
       _ckQuery () {
-        setUrlParams({ pageNo: 1 })
-        this.$emit('on-query', {
-          startDate: this.startDate || '',
-          endDate: this.endDate || '',
-          stateType: this.stateType || '',
-          host: _.trim(this.host) || '',
-          searchVal: _.trim(this.searchVal) || ''
-        })
+        this.$emit('on-query', this.searchParams)
       },
       /**
        * change times
        */
       _onChangeStartStop (val) {
-        this.startDate = val[0]
-        this.endDate = val[1]
-        // set url params
-        setUrlParams({
-          startDate: this.startDate,
-          endDate: this.endDate
-        })
+        this.searchParams.startDate = val[0]
+        this.searchParams.endDate = val[1]
       },
       /**
        * change state
        */
       _onChangeState (val) {
-        this.stateType = val.value
-        // set url params
-        setUrlParams({
-          stateType: this.stateType
-        })
+        this.searchParams.stateType = val.value
       },
       /**
        * empty date
        */
       _dateEmpty () {
-        this.startDate = ''
-        this.endDate = ''
+        this.searchParams.startDate = ''
+        this.searchParams.endDate = ''
         this.$refs.datepicker.empty()
-        // set url params
-        setUrlParams({
-          startDate: '',
-          endDate: ''
-        })
       }
     },
     watch: {
-      searchVal (val) {
-        setUrlParams({
-          searchVal: _.trim(val)
-        })
-      }
     },
     created () {
-      let query = this.$route.query
-      if (!_.isEmpty(query)) {
-        this.searchVal = query.searchVal
-        this.startDate = query.startDate
-        this.endDate = query.endDate
-        this.stateType = query.stateType
-        this.datepicker = (!this.startDate && !this.endDate) ? [] : [this.startDate, this.endDate]
+      // Routing parameter merging
+      if (!_.isEmpty(this.$route.query)) {
+        this.searchParams = _.assign(this.searchParams, this.$route.query)
       }
     },
     mounted () {
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
new file mode 100644
index 0000000000..408b98eb68
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
@@ -0,0 +1,141 @@
+<template>
+  <m-conditions>
+    <template slot="search-group">
+      <div class="list">
+        <x-button type="ghost" size="small" @click="_ckQuery" icon="fa fa-search"></x-button>
+      </div>
+      <div class="list">
+        <x-datepicker
+                :value="[searchParams.startDate,searchParams.endDate]"
+                ref="datepicker"
+                @on-change="_onChangeStartStop"
+                type="daterange"
+                format="YYYY-MM-DD HH:mm:ss"
+                placement="bottom-end"
+                :panelNum="2">
+          <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
+            <i slot="suffix"
+               @click.stop="_dateEmpty()"
+               class="ans-icon-fail-solid"
+               v-show="value"
+               style="font-size: 13px;cursor: pointer;margin-top: 1px;">
+            </i>
+          </x-input>
+        </x-datepicker>
+      </div>
+      <div class="list">
+        <x-input v-model="searchParams.destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input>
+      </div>
+      <div class="list">
+        <x-input v-model="searchParams.sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-input>
+      </div>
+      <div class="list">
+        <x-select style="width: 90px;" @on-change="_onChangeState" :value="searchParams.state">
+          <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 90px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down"></x-input>
+          <x-option
+                  v-for="city in stateList"
+                  :key="city.label"
+                  :value="city.code"
+                  :label="city.label">
+          </x-option>
+        </x-select>
+      </div>
+      <div class="list">
+        <x-datepicker
+                v-model="searchParams.taskDate"
+                @on-change="_onChangeDate"
+                format="YYYY-MM-DD"
+                :panelNum="1">
+          <x-input slot="input" readonly slot-scope="{value}" style="width: 130px;" :value="value" size="small" :placeholder="$t('Date')"></x-input>
+        </x-datepicker>
+      </div>
+      <div class="list">
+        <x-input v-model="searchParams.taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input>
+      </div>
+    </template>
+  </m-conditions>
+</template>
+<script>
+  import _ from 'lodash'
+  import mConditions from '@/module/components/conditions/conditions'
+  export default {
+    name: 'conditions',
+    data () {
+      return {
+        stateList: [
+          {
+            label: `${this.$t('none')}`,
+            code: ``
+          },
+          {
+            label: `${this.$t('success')}`,
+            code: `成功`
+          },
+          {
+            label: `${this.$t('waiting')}`,
+            code: `等待`
+          },
+          {
+            label: `${this.$t('execution')}`,
+            code: `执行中`
+          },
+          {
+            label: `${this.$t('finish')}`,
+            code: `完成`
+          }, {
+            label: `${this.$t('failed')}`,
+            code: `失败`
+          }
+        ],
+        searchParams: {
+          taskName: '',
+          state: '',
+          sourceTable: '',
+          destTable: '',
+          taskDate: '',
+          startDate: '',
+          endDate: ''
+        }
+      }
+    },
+    props: {},
+    methods: {
+      _ckQuery () {
+        this.$emit('on-query', this.searchParams)
+      },
+      /**
+       * change times
+       */
+      _onChangeStartStop (val) {
+        this.searchParams.startDate = val[0]
+        this.searchParams.endDate = val[1]
+      },
+      /**
+       * change state
+       */
+      _onChangeState (val) {
+        this.searchParams.state = val.value
+      },
+      /**
+       * empty date
+       */
+      _dateEmpty () {
+        this.searchParams.startDate = ''
+        this.searchParams.endDate = ''
+        this.$refs.datepicker.empty()
+      },
+      _onChangeDate (val) {
+        this.searchParams.taskDate = val.replace(/-/g, '')
+      }
+    },
+    created () {
+      // Routing parameter merging
+      if (!_.isEmpty(this.$route.query)) {
+        this.searchParams = _.assign(this.searchParams, this.$route.query)
+      }
+    },
+    mounted () {
+    },
+    components: { mConditions }
+  }
+</script>
\ No newline at end of file
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
similarity index 100%
rename from escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/_source/list.vue
rename to escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/pages/list/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
similarity index 65%
rename from escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/pages/list/index.vue
rename to escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
index f2341b31b0..11ca0327ba 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/pages/list/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="main-layout-box">
     <m-secondary-menu :type="'projects'"></m-secondary-menu>
-    <m-list-construction :title="$t('Task Instance')">
+    <m-list-construction :title="config.title">
       <template slot="conditions">
         <m-conditions @on-query="_onQuery"></m-conditions>
       </template>
       <template slot="content">
-        <template v-if="taskInstanceList.length">
-          <m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
+        <template v-if="taskRecordList.length">
+          <m-list :task-record-list="taskRecordList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
           </m-list>
           <div class="page-box">
             <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
           </div>
         </template>
-        <template v-if="!taskInstanceList.length">
+        <template v-if="!taskRecordList.length">
           <m-no-data></m-no-data>
         </template>
         <m-spin :is-spin="isLoading"></m-spin>
@@ -23,85 +23,73 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
   import mList from './_source/list'
-  import { setUrlParams } from '@/module/util/routerUtil'
+  import store from '@/conf/home/store'
+  import mConditions from './_source/conditions'
   import mSpin from '@/module/components/spin/spin'
-  import mConditions from '@/conf/home/pages/projects/pages/instance/pages/list/_source/conditions'
+  import { setUrlParams } from '@/module/util/routerUtil'
+  import mNoData from '@/module/components/noData/noData'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
-  import mNoData from '@/module/components/noData/noData'
 
   export default {
-    name: 'task-instance-list-index',
+    name: 'task-record-list',
     data () {
       return {
-        isLoading: true,
+        store,
         total: null,
-        taskInstanceList: [],
+        taskRecordList: [],
+        isLoading: true,
         searchParams: {
-          // page size
-          pageSize: 10,
-          // page index
-          pageNo: 1,
-          // Query name
-          searchVal: '',
-          // Process instance id
-          processInstanceId: '',
-          // host
-          host: '',
-          // state
-          stateType: '',
-          // start date
+          taskName: '',
+          state: '',
+          sourceTable: '',
+          destTable: '',
+          taskDate: '',
           startDate: '',
-          // end date
-          endDate: ''
+          endDate: '',
+          pageSize: 10,
+          pageNo: 1
         }
       }
     },
-    props: {},
+    props: {
+      config: String
+    },
     methods: {
-      ...mapActions('dag', ['getTaskInstanceList']),
-      /**
-       * click query
-       */
       _onQuery (o) {
         this.searchParams = _.assign(this.searchParams, o)
-        if (this.searchParams.taskName) {
-          this.searchParams.taskName = ''
-          setUrlParams({
-            taskName: ''
-          })
-        }
+        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams({
-          pageNo: this.searchParams.pageNo
-        })
+        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       /**
        * get list data
        */
-      _getTaskInstanceList (flag) {
+      _getList (flag) {
         this.isLoading = !flag
-        this.getTaskInstanceList(this.searchParams).then(res => {
-          this.taskInstanceList = []
-          this.taskInstanceList = res.totalList
+        this.store.dispatch(`dag/${this.config.apiFn}`, this.searchParams).then(res => {
+          this.taskRecordList = []
+          this.taskRecordList = res.totalList
           this.total = res.total
           this.isLoading = false
         }).catch(e => {
           this.isLoading = false
         })
       },
+      _onUpdate () {
+        this._debounceGET()
+      },
       /**
        * Anti-shake request interface
        * @desc Prevent function from being called multiple times
        */
       _debounceGET: _.debounce(function (flag) {
-        this._getTaskInstanceList(flag)
+        this._getList(flag)
       }, 100, {
         'leading': false,
         'trailing': true
@@ -118,7 +106,7 @@
           this.searchParams.pageNo = a.query.pageNo || 1
         }
       },
-      'searchParams': {
+      'searchParams.pageNo': {
         deep: true,
         handler () {
           this._debounceGET()
@@ -136,4 +124,4 @@
     },
     components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index e18eb32eef..9ec8355989 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -62,9 +62,7 @@
        */
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams({
-          pageNo: this.searchParams.pageNo
-        })
+        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       /**
@@ -73,9 +71,7 @@
       _onConditions (o) {
         this.searchParams.searchVal = o.searchVal
         this.searchParams.pageNo = 1
-        setUrlParams({
-          pageNo: this.searchParams.pageNo
-        })
+        setUrlParams(this.searchParams)
         this._debounceGET()
       },
       /**
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/historyTaskRecord/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/historyTaskRecord/index.vue
new file mode 100644
index 0000000000..ad9cf6e302
--- /dev/null
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/historyTaskRecord/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <m-list :config="config"></m-list>
+</template>
+<script>
+  import mList from '@/conf/home/pages/projects/pages/_source/taskRecordList'
+  export default {
+    name: 'history-task-record',
+    data () {
+      return {
+        config: {
+          title: `${this.$t('History task record')}`,
+          apiFn: 'getHistoryTaskRecordList'
+        }
+      }
+    },
+    components: { mList }
+  }
+</script>
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue
index a43c532e66..5e24201828 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue
@@ -37,7 +37,7 @@
                           <a href="javascript:" @click="id && _goTask(item.key)" :class="id ?'links':''">{{item.value}}</a>
                         </span>
                       </td>
-                      <td><span>{{item.key}}</span></td>
+                      <td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
                     </tr>
                   </table>
                 </div>
@@ -63,7 +63,7 @@
                     <tr v-for="(item,$index) in processStateCountList">
                       <td><span>{{$index+1}}</span></td>
                       <td><span><a href="javascript:" @click="id && _goProcess(item.key)" :class="id ?'links':''">{{item.value}}</a></span></td>
-                      <td><span>{{item.key}}</span></td>
+                      <td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
                     </tr>
                   </table>
                 </div>
@@ -93,7 +93,7 @@
   import dayjs from 'dayjs'
   import { mapActions } from 'vuex'
   import { pie, bar } from './chartConfig'
-  import { stateType } from '@/conf/home/pages/projects/pages/instance/pages/list/_source/common'
+  import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
   import Chart from '~/@analysys/ana-charts'
   import mNoData from '@/module/components/noData/noData'
   import mSpin from '@/module/components/spin/spin'
@@ -273,4 +273,12 @@
       }
     }
   }
+  .table-small-model {
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space:  nowrap;
+      display: block;
+    }
+  }
 </style>
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index 8001bb8e36..d429801815 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -3,7 +3,7 @@
     <m-secondary-menu :type="'projects'"></m-secondary-menu>
     <m-list-construction :title="$t('Process Instance')">
       <template slot="conditions">
-        <m-conditions @on-query="_onQuery"></m-conditions>
+        <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
       </template>
       <template slot="content">
         <template v-if="processInstanceList.length">
@@ -25,13 +25,13 @@
   import _ from 'lodash'
   import { mapActions } from 'vuex'
   import mList from './_source/list'
-  import mConditions from './_source/conditions'
   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 mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import mInstanceConditions from '@/conf/home/pages/projects/pages/_source/instanceConditions'
 
   export default {
     name: 'instance-list-index',
@@ -70,15 +70,16 @@
        */
       _onQuery (o) {
         this.searchParams = _.assign(this.searchParams, o)
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       /**
        * 分页事件
        */
       _page (val) {
         this.searchParams.pageNo = val
-        setUrlParams({
-          pageNo: this.searchParams.pageNo
-        })
+        setUrlParams(this.searchParams)
+        this._debounceGET()
       },
       /**
        * 获取list数据
@@ -98,7 +99,7 @@
        * 更新
        */
       _onUpdate () {
-        this._debounceGET('false')
+        this._debounceGET()
       },
       /**
        * 路由变动
@@ -158,7 +159,7 @@
       // 销毁轮循
       clearInterval(this.setIntervalP)
     },
-    components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
+    components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
   }
 </script>
 
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/pages/list/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
similarity index 100%
rename from escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/pages/list/_source/list.vue
rename to escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
index d7423b3b0f..f8fb8ff1d7 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
@@ -1,8 +1,135 @@
 <template>
-  <router-view></router-view>
+  <div class="main-layout-box">
+    <m-secondary-menu :type="'projects'"></m-secondary-menu>
+    <m-list-construction :title="$t('Task Instance')">
+      <template slot="conditions">
+        <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
+      </template>
+      <template slot="content">
+        <template v-if="taskInstanceList.length">
+          <m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
+          </m-list>
+          <div class="page-box">
+            <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
+          </div>
+        </template>
+        <template v-if="!taskInstanceList.length">
+          <m-no-data></m-no-data>
+        </template>
+        <m-spin :is-spin="isLoading"></m-spin>
+      </template>
+    </m-list-construction>
+  </div>
 </template>
 <script>
+  import _ from 'lodash'
+  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 mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
+  import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import mInstanceConditions from '@/conf/home/pages/projects/pages/_source/instanceConditions'
+
   export default {
-    name: 'task-instance-index'
+    name: 'task-instance-list-index',
+    data () {
+      return {
+        isLoading: true,
+        total: null,
+        taskInstanceList: [],
+        searchParams: {
+          // page size
+          pageSize: 10,
+          // page index
+          pageNo: 1,
+          // Query name
+          searchVal: '',
+          // Process instance id
+          processInstanceId: '',
+          // host
+          host: '',
+          // state
+          stateType: '',
+          // start date
+          startDate: '',
+          // end date
+          endDate: ''
+        }
+      }
+    },
+    props: {},
+    methods: {
+      ...mapActions('dag', ['getTaskInstanceList']),
+      /**
+       * click query
+       */
+      _onQuery (o) {
+        this.searchParams = _.assign(this.searchParams, o)
+        if (this.searchParams.taskName) {
+          this.searchParams.taskName = ''
+        }
+        setUrlParams(this.searchParams)
+        this._debounceGET()
+      },
+      _page (val) {
+        this.searchParams.pageNo = val
+        setUrlParams(this.searchParams)
+        this._debounceGET()
+      },
+      /**
+       * get list data
+       */
+      _getTaskInstanceList (flag) {
+        this.isLoading = !flag
+        this.getTaskInstanceList(this.searchParams).then(res => {
+          this.taskInstanceList = []
+          this.taskInstanceList = res.totalList
+          this.total = res.total
+          this.isLoading = false
+        }).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()
+        }
+      }
+    },
+    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 }
   }
-</script>
+</script>
\ No newline at end of file
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/index.vue
index 11e645ab3d..5e7f981fc3 100644
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/index.vue
+++ b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/index.vue
@@ -1,8 +1,18 @@
 <template>
-  <router-view></router-view>
+  <m-list :config="config"></m-list>
 </template>
 <script>
+  import mList from '@/conf/home/pages/projects/pages/_source/taskRecordList'
   export default {
-    name: 'task-record-index'
+    name: 'task-record',
+    data () {
+      return {
+        config: {
+          title: `${this.$t('Task record')}`,
+          apiFn: 'getTaskRecordList'
+        }
+      }
+    },
+    components: { mList }
   }
 </script>
diff --git a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/index.vue b/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/index.vue
deleted file mode 100644
index 007a9144d8..0000000000
--- a/escheduler-ui/src/js/conf/home/pages/projects/pages/taskRecord/pages/list/index.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div class="main-layout-box">
-    <m-secondary-menu :type="'projects'"></m-secondary-menu>
-    <m-list-construction :title="$t('Task record')">
-      <template slot="conditions">
-        <m-conditions>
-          <template slot="search-group">
-            <div class="list">
-              <x-button type="ghost" size="small" @click="_ckQuery" icon="fa fa-search"></x-button>
-            </div>
-            <div class="list">
-              <x-datepicker
-                      ref="datepicker"
-                      @on-change="_onChangeStartStop"
-                      type="daterange"
-                      format="YYYY-MM-DD HH:mm:ss"
-                      placement="bottom-end"
-                      :panelNum="2">
-                <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
-                  <i slot="suffix"
-                     @click.stop="_dateEmpty()"
-                     class="ans-icon-fail-solid"
-                     v-show="value"
-                     style="font-size: 13px;cursor: pointer;margin-top: 1px;">
-                  </i>
-                </x-input>
-              </x-datepicker>
-            </div>
-            <div class="list">
-              <x-input v-model="destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input>
-            </div>
-            <div class="list">
-              <x-input v-model="sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-input>
-            </div>
-            <div class="list">
-              <x-select style="width: 90px;" @on-change="_onChangeState">
-                <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 90px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down"></x-input>
-                <x-option
-                        v-for="city in stateList"
-                        :key="city.label"
-                        :value="city.code"
-                        :label="city.label">
-                </x-option>
-              </x-select>
-            </div>
-            <div class="list">
-              <x-datepicker
-                      @on-change="_onChangeDate"
-                      format="YYYY-MM-DD"
-                      :panelNum="1">
-                <x-input slot="input" readonly slot-scope="{value}" style="width: 130px;" :value="value" size="small" :placeholder="$t('Date')"></x-input>
-              </x-datepicker>
-            </div>
-            <div class="list">
-              <x-input v-model="taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input>
-            </div>
-          </template>
-        </m-conditions>
-      </template>
-      <template slot="content">
-        <template v-if="taskRecordList.length">
-          <m-list :task-record-list="taskRecordList" @on-update="_onUpdate" :page-no="pageNo" :page-size="pageSize">
-          </m-list>
-          <div class="page-box">
-            <x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page>
-          </div>
-        </template>
-        <template v-if="!taskRecordList.length">
-          <m-no-data></m-no-data>
-        </template>
-        <m-spin :is-spin="isLoading"></m-spin>
-      </template>
-    </m-list-construction>
-  </div>
-</template>
-<script>
-  import i18n from '@/module/i18n'
-  import { mapActions } from 'vuex'
-  import mList from './_source/list'
-  import mSpin from '@/module/components/spin/spin'
-  import mNoData from '@/module/components/noData/noData'
-  import mConditions from '@/module/components/conditions/conditions'
-  import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
-  import mListConstruction from '@/module/components/listConstruction/listConstruction'
-
-  export default {
-    name: 'task-record-list-index',
-    data () {
-      return {
-        pageSize: 10,
-        pageNo: 1,
-        total: null,
-        taskRecordList: [],
-        isLoading: true,
-        taskName: '',
-        state: '',
-        sourceTable: '',
-        destTable: '',
-        taskDate: '',
-        startDate: '',
-        endDate: '',
-        stateList: [
-          {
-            label: `${i18n.$t('none')}`,
-            code: ``
-          },
-          {
-            label: `${i18n.$t('success')}`,
-            code: `${i18n.$t('success')}`
-          },
-          {
-            label: `${i18n.$t('waiting')}`,
-            code: `${i18n.$t('waiting')}`
-          },
-          {
-            label: `${i18n.$t('In Execution')}`,
-            code: `${i18n.$t('In Execution')}`
-          },
-          {
-            label: `${i18n.$t('Finish')}`,
-            code: `${i18n.$t('Finish')}`
-          }, {
-            label: `${i18n.$t('failed')}`,
-            code: `${i18n.$t('failed')}`
-          }
-        ]
-      }
-    },
-    props: {},
-    methods: {
-      ...mapActions('dag', ['getTaskRecordList']),
-      /**
-       * empty date
-       */
-      _dateEmpty () {
-        this.startDate = ''
-        this.endDate = ''
-        this.$refs.datepicker.empty()
-      },
-      _ckQuery () {
-        this._getTaskRecordList()
-      },
-      _onChangeState (val) {
-        this.state = val.value
-      },
-      _onChangeStartStop (val) {
-        this.startDate = val[0]
-        this.endDate = val[1]
-      },
-      _onChangeDate (val) {
-        this.taskDate = val.replace(/-/g, '')
-      },
-      _page (val) {
-        this.pageNo = val
-        this._getTaskRecordList()
-      },
-      /**
-       * get list data
-       */
-      _getTaskRecordList (flag) {
-        this.isLoading = !flag
-        let param = {
-          pageSize: this.pageSize,
-          pageNo: this.pageNo,
-          taskName: this.taskName,
-          state: this.state,
-          sourceTable: this.sourceTable,
-          destTable: this.destTable,
-          taskDate: this.taskDate,
-          startDate: this.startDate,
-          endDate: this.endDate
-        }
-        this.taskRecordList = []
-        this.getTaskRecordList(param).then(res => {
-          this.taskRecordList = res.totalList
-          this.total = res.total
-          this.isLoading = false
-        }).catch(e => {
-          this.isLoading = false
-        })
-      },
-      _onUpdate () {
-        this._getTaskRecordList('false')
-      }
-    },
-    watch: {
-    },
-    created () {
-    },
-    mounted () {
-      this._getTaskRecordList()
-    },
-    components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
-  }
-</script>
diff --git a/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue b/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
index 1aad2dc96e..a0225733e2 100644
--- a/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
+++ b/escheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
@@ -1,5 +1,5 @@
 <template>
-  <m-popup :ok-text="$t('Confirm Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true">
+  <m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true">
     <template slot="content">
       <div class="resource-rename-model">
         <m-list-box-f>
diff --git a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
index 1dbfcff788..f73be43ed6 100644
--- a/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
+++ b/escheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/rename.vue
@@ -1,5 +1,5 @@
 <template>
-  <m-popup :ok-text="$t('Confirm Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true">
+  <m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true">
     <template slot="content">
       <div class="resource-rename-model">
         <m-list-box-f>
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
index 7c95f5a62b..39c15c6d48 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue
@@ -35,7 +35,6 @@
 </template>
 <script>
   import _ from 'lodash'
-  import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
   import mPopup from '@/module/components/popup/popup'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
@@ -45,15 +44,15 @@
     data () {
       return {
         store,
-        queue:'',
-        queueName:''
+        queue: '',
+        queueName: ''
       }
     },
     props: {
       item: Object
     },
     methods: {
-      _ok(){
+      _ok () {
         if (!this._verification()) {
           return
         }
@@ -87,7 +86,7 @@
           }).catch(e => {
             $catch(e)
           })
-        }else{
+        } else {
           this._verifyName(param).then(() => {
             this.$refs['popup'].spinnerLoading = true
             this.store.dispatch(`security/createQueueQ`, param).then(res => {
@@ -99,9 +98,8 @@
             this.$message.error(e.msg || '')
           })
         }
-
       },
-      _verification(){
+      _verification () {
         if (!this.queueName) {
           this.$message.warning(`Please enter name`)
           return false
@@ -112,7 +110,7 @@
         }
         return true
       },
-      _verifyName(param){
+      _verifyName (param) {
         return new Promise((resolve, reject) => {
           this.store.dispatch(`security/verifyQueueQ`, param).then(res => {
             resolve()
diff --git a/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
index f2d8a26b00..98b28b3e4a 100644
--- a/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
+++ b/escheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
@@ -192,13 +192,13 @@
           let sourceListPrs = _.map(data[0], v => {
             return {
               id: v.id,
-              name: v.name
+              name: v.alias
             }
           })
           let targetListPrs = _.map(data[1], v => {
             return {
               id: v.id,
-              name: v.name
+              name: v.alias
             }
           })
           let self = this
diff --git a/escheduler-ui/src/js/conf/home/router/index.js b/escheduler-ui/src/js/conf/home/router/index.js
index 0ed509b35f..24f652780a 100644
--- a/escheduler-ui/src/js/conf/home/router/index.js
+++ b/escheduler-ui/src/js/conf/home/router/index.js
@@ -157,45 +157,29 @@ const router = new Router({
         },
         {
           path: '/projects/task-instance',
-          name: 'task-instance-index',
+          name: 'task-instance',
           component: resolve => require(['../pages/projects/pages/taskInstance'], resolve),
           meta: {
             title: `${i18n.$t('Task Instance')}`
-          },
-          redirect: {
-            name: 'task-instance-list'
-          },
-          children: [
-            {
-              path: '/projects/task-instance/list',
-              name: 'task-instance-list',
-              component: resolve => require(['../pages/projects/pages/taskInstance/pages/list/index'], resolve),
-              meta: {
-                title: `${i18n.$t('Task Instance')}`
-              }
-            }
-          ]
+          }
+
         },
         {
           path: '/projects/task-record',
-          name: 'task-record-index',
+          name: 'task-record',
           component: resolve => require(['../pages/projects/pages/taskRecord'], resolve),
           meta: {
             title: `${i18n.$t('Task record')}`
-          },
-          redirect: {
-            name: 'task-record-list'
-          },
-          children: [
-            {
-              path: '/projects/task-record/list',
-              name: 'task-record-list',
-              component: resolve => require(['../pages/projects/pages/taskRecord/pages/list/index'], resolve),
-              meta: {
-                title: `${i18n.$t('Task record')}`
-              }
-            }
-          ]
+          }
+        },
+        {
+          path: '/projects/history-task-record',
+          name: 'history-task-record',
+          component: resolve => require(['../pages/projects/pages/historyTaskRecord'], resolve),
+          meta: {
+            title: `History task record`
+          }
+
         }
       ]
     },
diff --git a/escheduler-ui/src/js/conf/home/store/dag/actions.js b/escheduler-ui/src/js/conf/home/store/dag/actions.js
index f82510c780..48610c26f9 100644
--- a/escheduler-ui/src/js/conf/home/store/dag/actions.js
+++ b/escheduler-ui/src/js/conf/home/store/dag/actions.js
@@ -478,6 +478,18 @@ export default {
       })
     })
   },
+  /**
+   * Query history task record list
+   */
+  getHistoryTaskRecordList ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get(`projects/task-record/history-list-paging`, payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * tree chart
    */
diff --git a/escheduler-ui/src/js/conf/home/store/security/actions.js b/escheduler-ui/src/js/conf/home/store/security/actions.js
index b096ca1ee0..a3c9909069 100644
--- a/escheduler-ui/src/js/conf/home/store/security/actions.js
+++ b/escheduler-ui/src/js/conf/home/store/security/actions.js
@@ -357,7 +357,7 @@ export default {
   /**
    * get queue list pages
    */
-  getQueueListP({ state }, payload){
+  getQueueListP ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.get(`queue/list-paging`, payload, res => {
         resolve(res.data)
@@ -369,7 +369,7 @@ export default {
   /**
    * create queue
    */
-  createQueueQ({ state }, payload){
+  createQueueQ ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.post(`queue/create`, payload, res => {
         resolve(res)
@@ -381,7 +381,7 @@ export default {
   /**
    * update queue
    */
-  updateQueueQ({ state }, payload){
+  updateQueueQ ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.post(`queue/update`, payload, res => {
         resolve(res)
@@ -393,7 +393,7 @@ export default {
   /**
    * update queue
    */
-  verifyQueueQ({ state }, payload){
+  verifyQueueQ ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.post(`queue/verify-queue`, payload, res => {
         resolve(res)
@@ -401,5 +401,5 @@ export default {
         reject(e)
       })
     })
-  },
+  }
 }
diff --git a/escheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue b/escheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
index be00a65982..8075b34ee7 100644
--- a/escheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
+++ b/escheduler-ui/src/js/module/components/fileUpdate/fileUpdate.vue
@@ -1,7 +1,7 @@
 <template>
   <m-popup
           ref="popup"
-          :ok-text="$t('Confirm Upload')"
+          :ok-text="$t('Upload')"
           :nameText="$t('File Upload')"
           @ok="_ok"
           :disabled="progress === 0 ? false : true">
diff --git a/escheduler-ui/src/js/module/components/secondaryMenu/menu.js b/escheduler-ui/src/js/module/components/secondaryMenu/menu.js
index 58e6c4144c..6f1979eac1 100644
--- a/escheduler-ui/src/js/module/components/secondaryMenu/menu.js
+++ b/escheduler-ui/src/js/module/components/secondaryMenu/menu.js
@@ -45,13 +45,18 @@ let menu = {
         },
         {
           name: `${i18n.$t('Task Instance')}`,
-          path: 'task-instance-list',
+          path: 'task-instance',
           id: 3
         },
         {
           name: `${i18n.$t('Task record')}`,
-          path: 'task-record-list',
+          path: 'task-record',
           id: 4
+        },
+        {
+          name: `${i18n.$t('History task record')}`,
+          path: 'history-task-record',
+          id: 5
         }
       ]
     }
diff --git a/escheduler-ui/src/js/module/i18n/locale/en_US.js b/escheduler-ui/src/js/module/i18n/locale/en_US.js
index 3bb8acc911..646b196d06 100644
--- a/escheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/escheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -208,8 +208,8 @@ export default {
   'Select date range': 'Select date range',
   'Date': 'Date',
   'waiting': 'waiting',
-  'In Execution': 'In Execution',
-  'Finish': 'Finish',
+  'execution': 'execution',
+  'finish': 'finish',
   'Create File': 'Create File',
   'File Name': 'File Name',
   'File Format': 'File Format',
@@ -251,7 +251,6 @@ export default {
   'Size': 'Size',
   'Rename': 'Rename',
   'Download': 'Download',
-  'Confirm Rename': 'Confirm Rename',
   'Submit': 'Submit',
   'Edit UDF Function': 'Edit UDF Function',
   'type': 'type',
@@ -298,7 +297,6 @@ export default {
   'Copy': 'Copy',
   'Delete': 'Delete',
   'Please enter keyword': 'Please enter keyword',
-  'Confirm Upload': 'Confirm Upload',
   'File Upload': 'File Upload',
   'Drag the file into the current upload window': 'Drag the file into the current upload window',
   'Drag area upload': 'Drag area upload',
@@ -410,4 +408,5 @@ export default {
   'Create queue': 'Create queue',
   'Edit queue': 'Edit queue',
   'Datasource manage': 'Datasource',
-}
\ No newline at end of file
+  'History task record': 'History task record'
+}
diff --git a/escheduler-ui/src/js/module/i18n/locale/zh_CN.js b/escheduler-ui/src/js/module/i18n/locale/zh_CN.js
index b6670eb40c..d9e024b497 100644
--- a/escheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/escheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -46,7 +46,7 @@ export default {
   'Confirm add': '确认添加',
   'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': '新创建子工作流还未执行，不能进入子工作流',
   'The task has not been executed and cannot enter the sub-Process': '该任务还未执行，不能进入子工作流',
-  'Please enter name (required)':'请输入名称（必填）',
+  'Please enter name (required)': '请输入名称（必填）',
   'Name already exists': '名称已存在请重新输入',
   'Download Log': '下载日志',
   'Refresh Log': '刷新日志',
@@ -208,8 +208,8 @@ export default {
   'Select date range': '选择日期区间',
   'Date': '日期',
   'waiting': '等待',
-  'In Execution': '执行中',
-  'Finish': '完成',
+  'execution': '执行中',
+  'finish': '完成',
   'Create File': '创建文件',
   'File Name': '文件名称',
   'File Format': '文件格式',
@@ -251,7 +251,6 @@ export default {
   'Size': '大小',
   'Rename': '重命名',
   'Download': '下载',
-  'Confirm Rename': '确认重命名',
   'Submit': '提交',
   'Edit UDF Function': '编辑UDF函数',
   'type': '类型',
@@ -297,11 +296,10 @@ export default {
   'Start': '运行',
   'Copy': '复制节点',
   'Please enter keyword': '请输入关键词',
-  'Confirm Upload': '确认上传',
   'File Upload': '文件上传',
   'Drag the file into the current upload window': '请将文件拖拽到当前上传窗口内！',
   'Drag area upload': '拖动区域上传',
-  'Upload': '点击上传',
+  'Upload': '上传',
   'Please enter file name': '请输入文件名',
   'Please select the file to upload': '请选择要上传的文件',
   'Resources manage': '资源中心',
@@ -409,4 +407,5 @@ export default {
   'Create queue': '创建队列',
   'Edit queue': '编辑队列',
   'Datasource manage': '数据源中心',
-}
\ No newline at end of file
+  'History task record': '历史任务记录'
+}
diff --git a/escheduler-ui/src/sass/common/index.scss b/escheduler-ui/src/sass/common/index.scss
index 15d36df5e5..2b4cf16be6 100644
--- a/escheduler-ui/src/sass/common/index.scss
+++ b/escheduler-ui/src/sass/common/index.scss
@@ -31,7 +31,7 @@
 }
 
 .ans-poptip {
-  min-width: 154px;
+  min-width: 158px;
 }
 
 .ans-checkbox-wrapper .checkbox-label,