diff --git a/src/views/pages/deploy/job/job-manage.vue b/src/views/pages/deploy/job/job-manage.vue
index 68241e0b77d4d2d9d634283c8fea2ccf6f766e16..0a54f52693732f492f43b09a2363fb3bfa53494b 100644
--- a/src/views/pages/deploy/job/job-manage.vue
+++ b/src/views/pages/deploy/job/job-manage.vue
@@ -86,92 +86,13 @@
       </template>
       <template v-slot:content>
         <div class="job-content">
-          <TsTable
-            v-bind="jobData"
-            :theadList="theadList"
-            :loading="isLoading"
+          <DeployPipelineTable
+            ref="tableData"
+            :defaultSearchParam="searchParam"
+            :defaultSearchValue="searchValue"
             :sortList="sortList"
             :sortOrder="sortOrder"
-            :sortMulti="false"
-            @changeCurrent="searchJob"
-            @changePageSize="changePageSize"
-            @updateSort="updateSort"
-          >
-            <template v-slot:showChildren="{ row }">
-              <span v-if="row.parentId == -1" class="text-href">
-                <span v-if="!row.loading" :class="{ 'tsfont-minus-square': row['showChildren'], 'tsfont-plus-square': !row['showChildren'] }" @click="toggleChildJob(row)"></span>
-                <Icon
-                  v-else
-                  type="ios-loading"
-                  size="16"
-                  class="loading"
-                ></Icon>
-              </span>
-            </template>
-            <template v-slot:name="{ row }">
-              <span
-                v-if="row.source === 'batchdeploy' || row.source === 'deployschedulepipeline'"
-                class="text-href"
-                @click="toBatchJobDetail(row)"
-                @contextmenu="newTab($event, row, 'batch-job-detail')"
-              >
-                {{ row.name }}
-              </span>
-              <span
-                v-else
-                class="text-href"
-                :class="{ 'ml-nm': (!!row.parentId && row.parentId != -1) }"
-                @contextmenu="newTab($event, row, 'job-detail')"
-                @click="toJobDetail(row)"
-              >{{ row.name }}</span>
-              <span><Status v-if="row.reviewStatus != 'passed'" :statusValue="row.reviewStatus" :statusName="row.reviewStatusName"></Status></span>
-              <Tooltip
-                v-if="row.warnCount > 0 || row.isHasIgnored > 0"
-                transfer
-                class="stepStatues com-status"
-                placement="bottom"
-                theme="light"
-              >
-                <span class="tsfont-warning-o text-warn"></span>
-                <template v-slot:content>
-                  <div>
-                    <div v-if="row.warnCount > 0">{{ $t('term.autoexec.loghaswarninfo') }}</div>
-                    <div v-if="row.isHasIgnored > 0">{{ $t('term.deploy.phaseexistignorenode') }}</div>
-                  </div>
-                </template>
-              </Tooltip>
-            </template>
-            <!-- <template slot="operationType" slot-scope="{ row }">
-              <span class="text-href" @click="toOperationDetail(row)">
-                <span>{{ row.operationTypeName }}</span>
-                <span v-if="row.operationName">({{ row.operationName }})</span>
-              </span>
-            </template> -->
-            <template slot="routeName" slot-scope="{ row }">
-              <span v-if="row.source == 'batchdeploy'">
-                <span>{{ row.route && row.route.name }}</span>
-              </span>
-              <span v-else class="text-href" @click="toRoute(row)">
-                <span>{{ row.route && row.route.name }}</span>
-              </span>
-            </template>
-            <template slot="status" slot-scope="{ row }">
-              <Status :statusValue="row.status" :statusName="row.statusName" type="text"></Status>
-            </template>
-            <template v-slot:startTime="{ row }">
-              <div v-if="row.startTime" class="fz10">
-                <span>{{ row.startTime | formatDate }}</span>
-                <span class="text-grey ml-xs">{{ $t('page.begin') }}</span>
-              </div>
-              <div v-if="row.endTime" class="fz10">
-                <span>{{ row.endTime | formatDate }}</span>
-                <span class="text-grey ml-xs">{{ $t('page.finish') }}</span>
-              </div>
-            </template>
-            <template slot="completionRate" slot-scope="{ row }">
-              <Liquid :percent="row.completionRate" :size="7" :config="getConfig(row)" />
-            </template>
-          </TsTable>
+          ></DeployPipelineTable>
         </div>
       </template>
     </TsContain>
@@ -225,15 +146,13 @@ export default {
   components: {
     CombineSearcher: () => import('@/resources/components/CombineSearcher/CombineSearcher.vue'),
     AppModuleList: () => import('../application-config/config/app/app-module-list.vue'),
-    TsTable: () => import('@/resources/components/TsTable/TsTable.vue'),
-    Status: () => import('@/resources/components/Status/CommonStatus.vue'),
-    Liquid: () => import('@/resources/components/SimpleGraph/Liquid.vue'),
     // SettingDialog:()=>import('./publishing/setting-dialog.vue'),
     AppEdit: () => import('@/views/pages/deploy/application-config/config/app/app-edit'), // 编辑权限
     ModuleEdit: () => import('@/views/pages/deploy/application-config/config/app/components/module-tree-edit'), // 编辑模块
     EnvEdit: () => import('@/views/pages/deploy/application-config/config/app/components/env-tree-edit'), // 编辑模块
     LockDialog: () => import('@/views/pages/deploy/job/resourcelock/resourcelock-dialog'), //资源锁
-    AddBatchJobDialog: () => import('./add-batch-job-dialog.vue')
+    AddBatchJobDialog: () => import('./add-batch-job-dialog.vue'),
+    DeployPipelineTable: () => import('@/views/pages/deploy/job/publishing/deploy-pipeline-table.vue')
   },
   props: {},
   data() {
@@ -243,7 +162,6 @@ export default {
       sortOrder: [{planStartTime: 'DESC'}],
       noConfigInfo: false, // 无配置信息，模块和环境
       moduleList: [],
-      isLoading: false,
       isShowResourceLockDialog: false,
       appModuleData: {},
       searchValue: {},
@@ -289,60 +207,6 @@ export default {
           }
         ]
       },
-      jobData: null,
-      jobEndStatusList: ['completed', 'aborted', 'ignored', 'failed'], //终点状态节点列表，非终点状态列表的需要定时刷新。
-      theadList: [
-        { key: 'showChildren' },
-        {
-          title: this.$t('page.name'),
-          key: 'name'
-        },
-        {
-          title: this.$t('page.scene'),
-          key: 'scenarioName'
-        },
-        {
-          title: this.$t('page.status'),
-          key: 'status'
-        },
-        {
-          title: this.$t('page.timecost'),
-          key: 'costTime'
-        },
-        {
-          title: this.$t('page.executeuser'),
-          key: 'execUserVo',
-          type: 'user',
-          uuid: 'uuid'
-        },
-        {
-          title: this.$t('page.sourcecategory'),
-          key: 'routeName'
-        },
-        {
-          title: this.$t('page.source'),
-          key: 'sourceName'
-        },
-        {
-          title: this.$t('page.plantime'),
-          key: 'planStartTime',
-          type: 'time'
-        },
-        {
-          title: this.$t('page.startstoptime'),
-          key: 'startTime',
-          keyend: 'endTime'
-        },
-        {
-          title: this.$t('term.autoexec.triggertype'),
-          key: 'triggerTypeName'
-        },
-        {
-          title: this.$t('term.autoexec.executionsituation'),
-          key: 'completionRate'
-        }
-      ],
-      contentHeight: 100,
       showDialog: false,
       selectedTreeNodeConfig: {},
       selectedApp: null,
@@ -374,15 +238,12 @@ export default {
     }
   },
   beforeMount() {},
-  mounted() {
-    this.searchJob();
-  },
+  mounted() {},
   beforeUpdate() {},
   updated() {},
   activated() {},
   deactivated() {},
-  beforeDestroy() {
-    this.clearTimmer();
+  beforeDestroy() {  
   },
   destroyed() {},
   methods: {
@@ -408,39 +269,6 @@ export default {
         });
       }
     },
-    toggleChildJob(row, isShow) {
-      if (row['showChildren']) {
-        this.$set(row, 'showChildren', false);
-        for (let i = this.jobData.tbodyList.length - 1; i >= 0; i--) {
-          const element = this.jobData.tbodyList[i];
-          if (element.parentId === row.id) {
-            this.jobData.tbodyList.splice(i, 1);
-          }
-        }
-      } else {
-        this.getChildrenJob(row);
-      }
-    },
-    getChildrenJob(parentRow) {
-      this.$set(parentRow, 'loading', true);
-      this.$api.deploy.job.searchJobList({ parentId: parentRow.id }).then(res => {
-        const jobList = res.Return.tbodyList;
-        if (jobList && jobList.length > 0) {
-          const pIndex = this.jobData.tbodyList.findIndex(d => d === parentRow);
-          if (pIndex >= 0) {
-            this.$set(parentRow, 'showChildren', true);
-            this.$set(parentRow, 'loading', false);
-            this.jobData.tbodyList.splice(pIndex + 1, 0, ...jobList);
-          }
-        }
-      });
-    },
-    clearTimmer() {
-      if (this.timmer) {
-        clearTimeout(this.timmer);
-        this.timmer = null;
-      }
-    },
     restoreHistory(historyData) {
       if (historyData['searchParam']) {
         this.searchParam = historyData['searchParam'];
@@ -489,73 +317,14 @@ export default {
       this.isShowResourceLockDialog = false;
     },
     searchJob(currentPage) {
-      this.clearTimmer();
-      this.isLoading = true;
       if (currentPage) {
         this.searchParam.currentPage = currentPage;
       }
-      const param = { ...this.searchParam, ...this.searchValue };
       this.$addHistoryData('searchValue', this.searchValue);
       this.$addHistoryData('searchParam', this.searchParam);
-      this.$api.deploy.job
-        .searchJobList(param)
-        .then(res => {
-          this.jobData = res.Return;
-          const idList = [];
-          if (this.jobData.tbodyList && this.jobData.tbodyList.length > 0) {
-            this.jobData.tbodyList.forEach(element => {
-              if (element.source === 'batchdeploy' || element.source === 'deployschedulepipeline') {
-                this.$set(element, '#expander', true);
-                if (this.searchValue.keyword) { //keyword搜索时，匹配到的父作业也需要将子作业展开
-                  this.toggleChildJob(element);
-                }
-              } else {
-                this.$set(element, '#expander', false);
-              }
-              if (!this.jobEndStatusList.includes(element.status)) {
-                idList.push(element.id);
-              }
-            });
-            if (idList.length > 0) {
-              this.timmer = setTimeout(() => {
-                this.refresh(idList);
-              }, 5000);
-            }
-          }
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
-    refresh(idList) {
-      this.clearTimmer();
-      this.$api.deploy.job.searchJobList({ needPage: false, idList: idList }).then(res => {
-        const jobList = res.Return.tbodyList;
-        const newIdList = [];
-        if (jobList && jobList.length > 0 && this.jobData.tbodyList && this.jobData.tbodyList.length > 0) {
-          jobList.forEach(job => {
-            const element = this.jobData.tbodyList.find(d => d.id === job.id);
-            if (element) {
-              this.$set(element, 'status', job.status);
-              this.$set(element, 'statusName', job.statusName);
-            }
-          });
-          this.jobData.tbodyList.forEach(job => {
-            if (!this.jobEndStatusList.includes(job.status)) {
-              newIdList.push(job.id);
-            }
-          });
-          if (newIdList.length > 0) {
-            this.timmer = setTimeout(() => {
-              this.refresh(newIdList);
-            }, 5000);
-          }
-        }
-      });
-    },
-    changePageSize(pageSize) {
-      this.searchParam.pageSize = pageSize;
-      this.searchJob(1);
+      if (this.$refs.tableData) {
+        this.$refs.tableData.searchJob(currentPage, this.searchValue);
+      }
     },
     getSelectedApp(app) {
       this.selectedApp = app;
@@ -581,33 +350,6 @@ export default {
         return false;
       }
     },
-    newTab(e, row, redirectPage) {
-      //鼠标右键打开新标签页
-      let base = this.$router.options.base;
-      let params = '';
-      if (row && row.id) {
-        params = `?id=${row.id}`;
-      }
-      let replaceStr = `<a href="${base}#${redirectPage}${params}" class="cursor">${row.name}</a>`;
-      e.currentTarget.innerHTML = replaceStr;
-    },
-    toJobDetail(row) {
-      this.$router.push({
-        path: '/job-detail',
-        query: { id: row.id }
-      });
-    },
-    toBatchJobDetail(row) {
-      const {parentId = ''} = row || {};
-      if (parentId != -1) {
-        this.toJobDetail(row);
-      } else {
-        this.$router.push({
-          path: '/batch-job-detail',
-          query: { id: row.id }
-        });
-      }
-    },
     // toOperationDetail(row) {
     //   if (row.operationType == 'combop') {
     //     this.$router.push({
@@ -619,21 +361,6 @@ export default {
     //     });
     //   }
     // },
-    toRoute(row) {
-      let routeConfig = row.route?.config;
-      if (routeConfig == null) {
-        return;
-      }
-      if (row.source == 'deploy') {
-        window.open(HOME + '/deploy.html#/application-config-pipeline-detail?appSystemId=' + routeConfig.appSystemId, '_blank');
-      } else if (row.source == 'batchdeploy') {
-        return;
-      } else if (row.source == 'deployschedulegeneral' || row.source == 'deployschedulepipeline') {
-        window.open(HOME + '/deploy.html#/schedule-job-edit?id=' + routeConfig.id, '_blank');
-      } else if (row.source == 'deployci') {
-        window.open(HOME + '/deploy.html#/config-add?appSystemId=' + routeConfig.appSystemId + '&id=' + routeConfig.id, '_blank');
-      }
-    },
     close(needPage) {
       this.showDialog = false;
       if (needPage) {
@@ -674,14 +401,6 @@ export default {
           this.moduleList = res.Return || [];
         }
       });
-    }, updateSort(sort) {
-      this.sortOrder = [];
-      this.sortOrder.push(sort);
-      this.$addHistoryData('sortOrder', this.sortOrder);
-      for (let key in sort) {
-        this.$set(this.searchParam, 'sortOrder', {'key': key, 'type': sort[key]});
-      }
-      this.searchJob();
     }
   },
   filter: {},
@@ -750,14 +469,14 @@ export default {
         const appSystemId = val && val.appId;
         const appModuleId = val && val.moduleId;
         if (appSystemId) {
-          this.searchParam.appSystemId = appSystemId;
+          this.$set(this.searchParam, 'appSystemId', appSystemId);
           this.envParam.appSystemId = appSystemId;
         } else {
           this.$delete(this.searchParam, 'appSystemId');
           this.$delete(this.envParam, 'appSystemId');
         }
         if (appModuleId) {
-          this.searchParam.appModuleId = appModuleId;
+          this.$set(this.searchParam, 'appModuleId', appModuleId);
           this.envParam.appModuleIdList = [appModuleId];
         } else {
           this.$delete(this.searchParam, 'appModuleId');
@@ -772,7 +491,4 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.job-content {
-  position: relative;
-}
 </style>
diff --git a/src/views/pages/deploy/job/publishing/deploy-pipeline-table.vue b/src/views/pages/deploy/job/publishing/deploy-pipeline-table.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03b88c6641203637d3ad8c9333a9fde9123bdf92
--- /dev/null
+++ b/src/views/pages/deploy/job/publishing/deploy-pipeline-table.vue
@@ -0,0 +1,361 @@
+<template>
+  <div class="job-content">
+    <TsTable
+      v-bind="jobData"
+      :theadList="theadList"
+      :loading="isLoading"
+      :sortList="sortList"
+      :sortOrder="sortOrder"
+      :sortMulti="false"
+      :fixedHeader="fixedHeader"
+      @changeCurrent="searchJob"
+      @changePageSize="changePageSize"
+      @updateSort="updateSort"
+    >
+      <template v-slot:showChildren="{ row }">
+        <span v-if="row.parentId == -1" class="text-href">
+          <span v-if="!row.loading" :class="{ 'tsfont-minus-square': row['showChildren'], 'tsfont-plus-square': !row['showChildren'] }" @click="toggleChildJob(row)"></span>
+          <Icon
+            v-else
+            type="ios-loading"
+            size="16"
+            class="loading"
+          ></Icon>
+        </span>
+      </template>
+      <template v-slot:name="{ row }">
+        <span
+          v-if="row.source === 'batchdeploy' || row.source === 'deployschedulepipeline'"
+          class="text-href"
+          @click="toBatchJobDetail(row)"
+          @contextmenu="newTab($event, row, 'batch-job-detail')"
+        >
+          {{ row.name }}
+        </span>
+        <span
+          v-else
+          class="text-href"
+          :class="{ 'ml-nm': (!!row.parentId && row.parentId != -1) }"
+          @contextmenu="newTab($event, row, 'job-detail')"
+          @click="toJobDetail(row)"
+        >{{ row.name }}</span>
+        <span><Status v-if="row.reviewStatus != 'passed'" :statusValue="row.reviewStatus" :statusName="row.reviewStatusName"></Status></span>
+        <Tooltip
+          v-if="row.warnCount > 0 || row.isHasIgnored > 0"
+          transfer
+          class="stepStatues com-status"
+          placement="bottom"
+          theme="light"
+        >
+          <span class="tsfont-warning-o text-warn"></span>
+          <template v-slot:content>
+            <div>
+              <div v-if="row.warnCount > 0">{{ $t('term.autoexec.loghaswarninfo') }}</div>
+              <div v-if="row.isHasIgnored > 0">{{ $t('term.deploy.phaseexistignorenode') }}</div>
+            </div>
+          </template>
+        </Tooltip>
+      </template>
+      <!-- <template slot="operationType" slot-scope="{ row }">
+              <span class="text-href" @click="toOperationDetail(row)">
+                <span>{{ row.operationTypeName }}</span>
+                <span v-if="row.operationName">({{ row.operationName }})</span>
+              </span>
+            </template> -->
+      <template slot="routeName" slot-scope="{ row }">
+        <span v-if="row.source == 'batchdeploy'">
+          <span>{{ row.route && row.route.name }}</span>
+        </span>
+        <span v-else class="text-href" @click="toRoute(row)">
+          <span>{{ row.route && row.route.name }}</span>
+        </span>
+      </template>
+      <template slot="status" slot-scope="{ row }">
+        <Status :statusValue="row.status" :statusName="row.statusName" type="text"></Status>
+      </template>
+      <template v-slot:startTime="{ row }">
+        <div v-if="row.startTime" class="fz10">
+          <span>{{ row.startTime | formatDate }}</span>
+          <span class="text-grey ml-xs">{{ $t('page.begin') }}</span>
+        </div>
+        <div v-if="row.endTime" class="fz10">
+          <span>{{ row.endTime | formatDate }}</span>
+          <span class="text-grey ml-xs">{{ $t('page.finish') }}</span>
+        </div>
+      </template>
+      <template slot="completionRate" slot-scope="{ row }">
+        <Liquid :percent="row.completionRate" :size="7" :config="getConfig(row)" />
+      </template>
+    </TsTable>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsTable: () => import('@/resources/components/TsTable/TsTable.vue'),
+    Status: () => import('@/resources/components/Status/CommonStatus.vue'),
+    Liquid: () => import('@/resources/components/SimpleGraph/Liquid.vue')
+
+  },
+  props: {
+    isNeedRefresh: {
+      type: Boolean,
+      default: true
+    },
+    defaultSearchParam: { type: Object },
+    defaultSearchValue: { type: Object },
+    sortList: { type: Array },
+    sortOrder: { type: Array },
+    fixedHeader: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      searchParam: this.defaultSearchParam || {},
+      isLoading: false,
+      jobData: null,
+      jobEndStatusList: ['completed', 'aborted', 'ignored', 'failed'], //终点状态节点列表，非终点状态列表的需要定时刷新。
+      theadList: [
+        { key: 'showChildren' },
+        {
+          title: this.$t('page.name'),
+          key: 'name'
+        },
+        {
+          title: this.$t('page.scene'),
+          key: 'scenarioName'
+        },
+        {
+          title: this.$t('page.status'),
+          key: 'status'
+        },
+        {
+          title: this.$t('page.timecost'),
+          key: 'costTime'
+        },
+        {
+          title: this.$t('page.executeuser'),
+          key: 'execUserVo',
+          type: 'user',
+          uuid: 'uuid'
+        },
+        {
+          title: this.$t('page.sourcecategory'),
+          key: 'routeName'
+        },
+        {
+          title: this.$t('page.source'),
+          key: 'sourceName'
+        },
+        {
+          title: this.$t('page.plantime'),
+          key: 'planStartTime',
+          type: 'time'
+        },
+        {
+          title: this.$t('page.startstoptime'),
+          key: 'startTime',
+          keyend: 'endTime'
+        },
+        {
+          title: this.$t('term.autoexec.triggertype'),
+          key: 'triggerTypeName'
+        },
+        {
+          title: this.$t('term.autoexec.executionsituation'),
+          key: 'completionRate'
+        }
+      ],
+      timmer: null
+    };
+  },
+  beforeCreate() {},
+  created() {
+    this.searchJob(1, this.defaultSearchValue);
+  },
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {
+    this.clearTimmer();
+  },
+  destroyed() {},
+  methods: {
+    searchJob(currentPage, searchValue) {
+      this.clearTimmer();
+      this.isLoading = true;
+      if (currentPage) {
+        this.searchParam.currentPage = currentPage;
+      }
+      const param = { ...this.searchParam, ...searchValue || {} };
+      if (this.$utils.isSame(this.searchParam, this.defaultSearchParam)) {
+        this.$emit('updateParam', 'searchParam', this.searchParam);
+      }
+      this.$api.deploy.job
+        .searchJobList(param)
+        .then(res => {
+          this.jobData = res.Return;
+          const idList = [];
+          if (this.jobData.tbodyList && this.jobData.tbodyList.length > 0) {
+            this.jobData.tbodyList.forEach(element => {
+              if (element.source === 'batchdeploy' || element.source === 'deployschedulepipeline') {
+                this.$set(element, '#expander', true);
+                if (searchValue && searchValue.keyword) { //keyword搜索时，匹配到的父作业也需要将子作业展开
+                  this.toggleChildJob(element);
+                }
+              } else {
+                this.$set(element, '#expander', false);
+              }
+              if (this.isNeedRefresh && !this.jobEndStatusList.includes(element.status)) {
+                idList.push(element.id);
+              }
+            });
+            if (this.isNeedRefresh && idList.length > 0) {
+              this.timmer = setTimeout(() => {
+                this.refresh(idList);
+              }, 5000);
+            }
+          }
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    changePageSize(pageSize) {
+      this.searchParam.pageSize = pageSize;
+      this.searchJob(1);
+    },
+    updateSort(sort) {
+      this.sortOrder = [];
+      this.sortOrder.push(sort);
+      this.$addHistoryData('sortOrder', this.sortOrder);
+      this.$emit('updateParam', 'sortOrder', this.sortOrder);
+      for (let key in sort) {
+        this.$set(this.searchParam, 'sortOrder', {'key': key, 'type': sort[key]});
+      }
+      this.searchJob();
+    },
+    toggleChildJob(row) {
+      if (row['showChildren']) {
+        this.$set(row, 'showChildren', false);
+        for (let i = this.jobData.tbodyList.length - 1; i >= 0; i--) {
+          const element = this.jobData.tbodyList[i];
+          if (element.parentId === row.id) {
+            this.jobData.tbodyList.splice(i, 1);
+          }
+        }
+      } else {
+        this.getChildrenJob(row);
+      }
+    },
+    getChildrenJob(parentRow) {
+      this.$set(parentRow, 'loading', true);
+      this.$api.deploy.job.searchJobList({ parentId: parentRow.id }).then(res => {
+        const jobList = res.Return.tbodyList;
+        if (jobList && jobList.length > 0) {
+          const pIndex = this.jobData.tbodyList.findIndex(d => d === parentRow);
+          if (pIndex >= 0) {
+            this.$set(parentRow, 'showChildren', true);
+            this.$set(parentRow, 'loading', false);
+            this.jobData.tbodyList.splice(pIndex + 1, 0, ...jobList);
+          }
+        }
+      });
+    },
+    toBatchJobDetail(row) {
+      const {parentId = ''} = row || {};
+      if (parentId != -1) {
+        this.toJobDetail(row);
+      } else {
+        this.$router.push({
+          path: '/batch-job-detail',
+          query: { id: row.id }
+        });
+      }
+    },
+    newTab(e, row, redirectPage) {
+      //鼠标右键打开新标签页
+      let base = this.$router.options.base;
+      let params = '';
+      if (row && row.id) {
+        params = `?id=${row.id}`;
+      }
+      let replaceStr = `<a href="${base}#${redirectPage}${params}" class="cursor">${row.name}</a>`;
+      e.currentTarget.innerHTML = replaceStr;
+    },
+    toJobDetail(row) {
+      this.$router.push({
+        path: '/job-detail',
+        query: { id: row.id }
+      });
+    },
+    toRoute(row) {
+      let routeConfig = row.route?.config;
+      if (routeConfig == null) {
+        return;
+      }
+      if (row.source == 'deploy') {
+        window.open(HOME + '/deploy.html#/application-config-pipeline-detail?appSystemId=' + routeConfig.appSystemId, '_blank');
+      } else if (row.source == 'batchdeploy') {
+        return;
+      } else if (row.source == 'deployschedulegeneral' || row.source == 'deployschedulepipeline') {
+        window.open(HOME + '/deploy.html#/schedule-job-edit?id=' + routeConfig.id, '_blank');
+      } else if (row.source == 'deployci') {
+        window.open(HOME + '/deploy.html#/config-add?appSystemId=' + routeConfig.appSystemId + '&id=' + routeConfig.id, '_blank');
+      }
+    },
+    refresh(idList) {
+      this.clearTimmer();
+      this.$api.deploy.job.searchJobList({ needPage: false, idList: idList }).then(res => {
+        const jobList = res.Return.tbodyList;
+        const newIdList = [];
+        if (jobList && jobList.length > 0 && this.jobData.tbodyList && this.jobData.tbodyList.length > 0) {
+          jobList.forEach(job => {
+            const element = this.jobData.tbodyList.find(d => d.id === job.id);
+            if (element) {
+              this.$set(element, 'status', job.status);
+              this.$set(element, 'statusName', job.statusName);
+            }
+          });
+          this.jobData.tbodyList.forEach(job => {
+            if (!this.jobEndStatusList.includes(job.status)) {
+              newIdList.push(job.id);
+            }
+          });
+          if (newIdList.length > 0) {
+            this.timmer = setTimeout(() => {
+              this.refresh(newIdList);
+            }, 5000);
+          }
+        }
+      });
+    },
+    clearTimmer() {
+      if (this.timmer) {
+        clearTimeout(this.timmer);
+        this.timmer = null;
+      }
+    }
+  },
+  filter: {},
+  computed: {
+    getConfig() {
+      return row => {
+        let config = {};
+        config.status = row.status;
+        row.status == 'running' ? (config.status = 'active') : row.status == 'error' ? (config.status = 'wrong') : '';
+        return config;
+      };
+    }
+  },
+  watch: {}
+};
+</script>
+<style lang="less" scoped>
+.job-content {
+  position: relative;
+}
+</style>
diff --git a/src/views/pages/deploy/pipeline/list-deployjob-dialog.vue b/src/views/pages/deploy/pipeline/list-deployjob-dialog.vue
index 2841dcea7b731776a712b5072ca54d671071fbf8..5280a21bb63b447da2dc4aad0f26c8b89499c4e7 100644
--- a/src/views/pages/deploy/pipeline/list-deployjob-dialog.vue
+++ b/src/views/pages/deploy/pipeline/list-deployjob-dialog.vue
@@ -6,85 +6,17 @@
           <div class="mb-nm">
             <TsRow>
               <Col :span="12"></Col>
-              <Col :span="12"><CombineSearcher v-model="searchValue" v-bind="searchConfig" @change="searchJob(1)"></CombineSearcher>
+              <Col :span="12"><CombineSearcher v-model="searchValue" v-bind="searchConfig" @change="searchDeployPipeline(1)"></CombineSearcher>
               </Col>
             </TsRow>
           </div>
           <div>
-            <TsTable
-              :theadList="theadList"
-              v-bind="jobData"
-              :loading="isLoading"
-              @changeCurrent="searchJob"
-              @changePageSize="changePageSize"
-            >
-              <template v-slot:showChildren="{ row }">
-                <span v-if="row.parentId == -1" class="text-href">
-                  <span v-if="!row.loading" :class="{ 'tsfont-minus-square': row['showChildren'], 'tsfont-plus-square': !row['showChildren'] }" @click="toggleChildJob(row)"></span>
-                  <Icon
-                    v-else
-                    type="ios-loading"
-                    size="16"
-                    class="loading"
-                  ></Icon>
-                </span>
-              </template>
-              <template v-slot:name="{ row }">
-                <span
-                  v-if="row.source === 'batchdeploy' || row.source === 'deployschedulepipeline'"
-                  class="text-href"
-                  @click="toBatchJobDetail(row)"
-                  @contextmenu="newTab($event, row, 'batch-job-detail')"
-                >
-                  {{ row.name }}
-                </span>
-                <span
-                  v-else
-                  class="text-href"
-                  :class="{ 'ml-nm': (!!row.parentId && row.parentId != -1) }"
-                  @contextmenu="newTab($event, row, 'job-detail')"
-                  @click="toJobDetail(row)"
-                >{{ row.name }}</span>
-                <span><Status v-if="row.reviewStatus != 'passed'" :statusValue="row.reviewStatus" :statusName="row.reviewStatusName"></Status></span>
-                <Tooltip
-                  v-if="row.warnCount > 0 || row.isHasIgnored > 0"
-                  transfer
-                  class="stepStatues com-status"
-                  placement="bottom"
-                  theme="light"
-                >
-                  <span class="tsfont-warning-o text-warn"></span>
-                  <template v-slot:content>
-                    <div>
-                      <div v-if="row.warnCount > 0">{{ $t('term.autoexec.loghaswarninfo') }}</div>
-                      <div v-if="row.isHasIgnored > 0">{{ $t('term.deploy.phaseexistignorenode') }}</div>
-                    </div>
-                  </template>
-                </Tooltip>
-              </template>
-              <template slot="operationType" slot-scope="{ row }">
-                <span class="text-href" @click="toOperationDetail(row)">
-                  <span>{{ row.operationTypeName }}</span>
-                  <span v-if="row.operationName">({{ row.operationName }})</span>
-                </span>
-              </template>
-              <template slot="status" slot-scope="{ row }">
-                <Status :statusValue="row.status" :statusName="row.statusName" type="text"></Status>
-              </template>
-              <template v-slot:startTime="{ row }">
-                <div v-if="row.startTime" class="fz10">
-                  <span>{{ row.startTime | formatDate }}</span>
-                  <span class="text-grey ml-xs">{{ $t('page.begin') }}</span>
-                </div>
-                <div v-if="row.endTime" class="fz10">
-                  <span>{{ row.endTime | formatDate }}</span>
-                  <span class="text-grey ml-xs">{{ $t('page.finish') }}</span>
-                </div>
-              </template>
-              <template slot="completionRate" slot-scope="{ row }">
-                <Liquid :percent="row.completionRate" :size="7" :config="getConfig(row)" />
-              </template>
-            </TsTable>
+            <DeployPipelineTable
+              ref="tableData"
+              :defaultSearchParam="searchParam"
+              :fixedHeader="false"
+              :isNeedRefresh="false"
+            ></DeployPipelineTable>
           </div>
         </div>
       </template>
@@ -95,10 +27,8 @@
 export default {
   name: '',
   components: {
-    TsTable: () => import('@/resources/components/TsTable/TsTable.vue'),
-    Liquid: () => import('@/resources/components/SimpleGraph/Liquid.vue'),
-    Status: () => import('@/resources/components/Status/CommonStatus.vue'),
-    CombineSearcher: () => import('@/resources/components/CombineSearcher/CombineSearcher.vue')
+    CombineSearcher: () => import('@/resources/components/CombineSearcher/CombineSearcher.vue'),
+    DeployPipelineTable: () => import('@/views/pages/deploy/job/publishing/deploy-pipeline-table.vue')
   },
   props: {
     id: { type: Number },
@@ -107,7 +37,6 @@ export default {
   data() {
     return {
       isLoading: false,
-      jobData: {},
       searchValue: {},
       searchConfig: { search: true,
         labelPosition: 'top',
@@ -158,60 +87,11 @@ export default {
         isShow: true,
         width: 'large',
         hasFooter: false
-      },
-      theadList: [
-        { key: 'showChildren' },
-        {
-          title: this.$t('page.name'),
-          key: 'name'
-        },
-        {
-          title: this.$t('page.scene'),
-          key: 'scenarioName'
-        },
-        {
-          title: this.$t('page.status'),
-          key: 'status'
-        },
-        {
-          title: this.$t('page.timecost'),
-          key: 'costTime'
-        },
-        {
-          title: this.$t('page.executeuser'),
-          key: 'execUserVo',
-          type: 'user',
-          uuid: 'uuid'
-        },
-        {
-          title: this.$t('page.source'),
-          key: 'sourceName'
-        },
-        {
-          title: this.$t('page.plantime'),
-          key: 'planStartTime',
-          type: 'time'
-        },
-        {
-          title: this.$t('page.startstoptime'),
-          key: 'startTime',
-          keyend: 'endTime'
-        },
-        {
-          title: this.$t('term.autoexec.triggertype'),
-          key: 'triggerTypeName'
-        },
-        {
-          title: this.$t('term.autoexec.executionsituation'),
-          key: 'completionRate'
-        }
-      ]
+      }
     };
   },
   beforeCreate() {},
-  created() {
-    this.searchJob(1);
-  },
+  created() {},
   beforeMount() {},
   mounted() {},
   beforeUpdate() {},
@@ -221,99 +101,17 @@ export default {
   beforeDestroy() {},
   destroyed() {},
   methods: {
-    changePageSize(pageSize) {
-      this.searchParam.pageSize = pageSize;
-      this.searchJob(1);
-    },
-    toggleChildJob(row, isShow) {
-      if (row['showChildren']) {
-        this.$set(row, 'showChildren', false);
-        for (let i = this.jobData.tbodyList.length - 1; i >= 0; i--) {
-          const element = this.jobData.tbodyList[i];
-          if (element.parentId === row.id) {
-            this.jobData.tbodyList.splice(i, 1);
-          }
-        }
-      } else {
-        this.getChildrenJob(row);
-      }
-    },
-    getChildrenJob(parentRow) {
-      this.$set(parentRow, 'loading', true);
-      this.$api.deploy.job.searchJobList({ parentId: parentRow.id }).then(res => {
-        const jobList = res.Return.tbodyList;
-        if (jobList && jobList.length > 0) {
-          const pIndex = this.jobData.tbodyList.findIndex(d => d === parentRow);
-          if (pIndex >= 0) {
-            this.$set(parentRow, 'showChildren', true);
-            this.$set(parentRow, 'loading', false);
-            this.jobData.tbodyList.splice(pIndex + 1, 0, ...jobList);
-          }
-        }
-      });
-    },
-    searchJob(currentPage) {
-      this.isLoading = true;
-      if (currentPage) {
-        this.searchParam.currentPage = currentPage;
+    searchDeployPipeline(currentPage) {
+      if (this.$refs.tableData) {
+        this.$refs.tableData.searchJob(currentPage, this.searchValue);
       }
-      const param = { ...this.searchParam, ...this.searchValue };
-      this.$api.deploy.job
-        .searchJobList(param)
-        .then(res => {
-          this.jobData = res.Return;
-          if (this.jobData.tbodyList && this.jobData.tbodyList.length > 0) {
-            this.jobData.tbodyList.forEach(element => {
-              if (element.source === 'batchdeploy' || element.source === 'deployschedulepipeline') {
-                this.$set(element, '#expander', true);
-              } else {
-                this.$set(element, '#expander', false);
-              }
-            });
-          }
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
     },
     close() {
       this.$emit('close');
-    },
-    toJobDetail(row) {
-      this.$router.push({
-        path: '/job-detail',
-        query: { id: row.id }
-      });
-    },
-    toBatchJobDetail(row) {
-      const {parentId = '', id = ''} = row || {};
-      if (parentId != -1) {
-        this.toJobDetail(row);
-      } else {
-        window.open(HOME + '/deploy.html#/batch-job-detail?id=' + id, '_blank');
-      }
-    },
-    newTab(e, row, redirectPage) {
-      //鼠标右键打开新标签页
-      let base = this.$router.options.base;
-      let params = '';
-      if (row && row.id) {
-        params = `?id=${row.id}`;
-      }
-      let replaceStr = `<a href="${base}#${redirectPage}${params}" class="cursor">${row.name}</a>`;
-      e.currentTarget.innerHTML = replaceStr;
     }
   },
   filter: {},
   computed: {
-    getConfig() {
-      return row => {
-        let config = {};
-        config.status = row.status;
-        row.status == 'running' ? (config.status = 'active') : row.status == 'error' ? (config.status = 'wrong') : '';
-        return config;
-      };
-    }
   },
   watch: {}
 };