diff --git a/admin/src/components/Pagination/index.vue b/admin/src/components/Pagination/index.vue
new file mode 100644
index 0000000..56f5a6b
--- /dev/null
+++ b/admin/src/components/Pagination/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/admin/src/components/RightToolbar/index.vue b/admin/src/components/RightToolbar/index.vue
new file mode 100644
index 0000000..776fcee
--- /dev/null
+++ b/admin/src/components/RightToolbar/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="top-right-btn" :style="style">
+    <el-row>
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "RightToolbar",
+  data() {
+    return {
+      // 显隐数据
+      value: [],
+      // 弹出层标题
+      title: "显示/隐藏",
+      // 是否显示弹出层
+      open: false,
+    };
+  },
+  props: {
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    columns: {
+      type: Array,
+    },
+    search: {
+      type: Boolean,
+      default: true,
+    },
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginRight = `${this.gutter / 2}px`;
+      }
+      return ret;
+    }
+  },
+  created() {
+    // 显隐列初始默认隐藏列
+    for (let item in this.columns) {
+      if (this.columns[item].visible === false) {
+        this.value.push(parseInt(item));
+      }
+    }
+  },
+  methods: {
+    // 搜索
+    toggleSearch() {
+      this.$emit("update:showSearch", !this.showSearch);
+    },
+    // 刷新
+    refresh() {
+      this.$emit("queryTable");
+    },
+    // 右侧列表元素变化
+    dataChange(data) {
+      for (let item in this.columns) {
+        const key = this.columns[item].key;
+        this.columns[item].visible = !data.includes(key);
+      }
+    },
+    // 打开显隐列dialog
+    showColumn() {
+      this.open = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/admin/src/main.js b/admin/src/main.js
index 1c16149..9441e7e 100644
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -64,6 +64,10 @@ import directive from './directive' //directive
 import DictData from '@/components/DictData'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+// 分页组件
+import Pagination from "@/components/Pagination";
+// 自定义表格工具组件
+import RightToolbar from "@/components/RightToolbar"
 
 Vue.use(VueLazyload, {
   preLoad: 1.3,
@@ -83,6 +87,8 @@ Vue.use(directive)
 DictData.install()
 
 Vue.component('DictTag', DictTag)
+Vue.component('Pagination', Pagination)
+Vue.component('RightToolbar', RightToolbar)
 Vue.component('attrFrom', attrFrom)
 Vue.component('UploadIndex', UploadIndex)
 Vue.component('SelfUpload', SelfUpload)
@@ -104,7 +110,8 @@ Vue.prototype.$validator = function(rule) {
 };
 Vue.prototype.handleTree = handleTree
 Vue.prototype.parseTime = parseTime 
-Vue.prototype.resetForm = resetForm 
+Vue.prototype.resetForm = resetForm
+Vue.prototype.addDateRange = addDateRange
 
 let cookieName = "VCONSOLE";
 let query = parseQuery();
diff --git a/admin/src/router/modules/flow.js b/admin/src/router/modules/flow.js
index 5a65969..248c97d 100644
--- a/admin/src/router/modules/flow.js
+++ b/admin/src/router/modules/flow.js
@@ -20,7 +20,7 @@ import Layout from '@/layout'
 
 
 const flowRouter = {
-  path: '/workflow/process',
+  path: '/flow',
   component: Layout,
   hidden: true,
   // permissions: ['workflow:process:query'],
@@ -35,7 +35,7 @@ const flowRouter = {
       path: 'detail/:procInsId([\\w|\\-]+)',
       component: () => import('@/views/workflow/work/detail'),
       name: 'WorkDetail',
-      meta: { title: '流程详情', activeMenu: '/work/own' }
+      meta: { title: '流程详情', activeMenu: '/workflow/work/own' }
     }
   ]
 }
diff --git a/admin/src/styles/index.scss b/admin/src/styles/index.scss
index d8b176d..1fc0b46 100644
--- a/admin/src/styles/index.scss
+++ b/admin/src/styles/index.scss
@@ -209,3 +209,8 @@ aside {
 .btn-width100{
   width: 100%;
 }
+
+.top-right-btn {
+  position: relative;
+  float: right;
+}
\ No newline at end of file
diff --git a/admin/src/views/workflow/work/copy.vue b/admin/src/views/workflow/work/copy.vue
index a74c216..331c898 100644
--- a/admin/src/views/workflow/work/copy.vue
+++ b/admin/src/views/workflow/work/copy.vue
@@ -190,7 +190,7 @@ export default {
     handleFlowRecord(row){
       console.log(row);
       this.$router.push({
-        path: '/workflow/process/detail/' + row.instanceId,
+        path: '/flow/detail/' + row.instanceId,
         query: {
           processed: false
         }
diff --git a/admin/src/views/workflow/work/finished.vue b/admin/src/views/workflow/work/finished.vue
index 7083001..c9c4268 100644
--- a/admin/src/views/workflow/work/finished.vue
+++ b/admin/src/views/workflow/work/finished.vue
@@ -215,7 +215,7 @@ export default {
     /** 流程流转记录 */
     handleFlowRecord(row){
       this.$router.push({
-        path: '/workflow/process/detail/' + row.procInsId,
+        path: '/flow/detail/' + row.procInsId,
         query: {
           processed: false
         }
diff --git a/admin/src/views/workflow/work/index.vue b/admin/src/views/workflow/work/index.vue
index 725cd3a..7313b8e 100644
--- a/admin/src/views/workflow/work/index.vue
+++ b/admin/src/views/workflow/work/index.vue
@@ -180,7 +180,7 @@ export default {
     },
     handleStart(row) {
       this.$router.push({
-        path: '/workflow/process/start/' + row.deploymentId,
+        path: '/flow/start/' + row.deploymentId,
         query: {
           definitionId: row.definitionId,
         }
diff --git a/admin/src/views/workflow/work/own.vue b/admin/src/views/workflow/work/own.vue
index d48e519..4a47832 100644
--- a/admin/src/views/workflow/work/own.vue
+++ b/admin/src/views/workflow/work/own.vue
@@ -247,7 +247,7 @@ export default {
     },
     handleAgain(row) {
       this.$router.push({
-        path: '/workflow/process/start/' + row.deployId,
+        path: '/flow/start/' + row.deployId,
         query: {
           definitionId: row.procDefId,
           procInsId: row.procInsId
@@ -268,7 +268,7 @@ export default {
     /** 流程流转记录 */
     handleFlowRecord(row) {
       this.$router.push({
-        path: '/workflow/process/detail/' + row.procInsId,
+        path: '/flow/detail/' + row.procInsId,
         query: {
           processed: false
         }
diff --git a/admin/src/views/workflow/work/todo.vue b/admin/src/views/workflow/work/todo.vue
index f354bbf..7c7b383 100644
--- a/admin/src/views/workflow/work/todo.vue
+++ b/admin/src/views/workflow/work/todo.vue
@@ -141,7 +141,7 @@ export default {
     // 跳转到处理页面
     handleProcess(row) {
       this.$router.push({
-        path: '/workflow/process/detail/' + row.procInsId,
+        path: '/flow/detail/' + row.procInsId,
         query: {
           taskId: row.taskId,
           processed: true