feature: 原子操作能力支持滚动执行 TencentBlueKing#446

hLinx · Jul 12, 2022 · 6c8ea08 · 6c8ea08
1 parent 68f6c0c
commit 6c8ea08
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/src/frontend/src/views/executive-history/step-detail/components/rolling-batch/index.vue b/src/frontend/src/views/executive-history/step-detail/components/rolling-batch/index.vue
@@ -73,7 +73,7 @@
             </div>
             <render-more-btn
                 :step-data="data"
-                @on-change="handleLocalChange" />
+                @on-change="handleLocalBatchChange" />
         </template>
         <div style="display: none;">
             <div
@@ -164,34 +164,29 @@
         watch: {
             data () {
                 this.list = Object.freeze(this.data.rollingTasks);
-                this.showConfirmActionPanel();
-
-                if (this.value === '') {
-                    // 首次加载默认选中正在执行的批次
-                    this.selectBatch = this.data.runningBatchOrder;
-                } else if (this.isAutoSelectRunningBatch
-                    && this.selectBatch !== this.data.runningBatchOrder) {
-                    // 用户没有进行主动选择批次，每次自动选中正在执行的批次
-                    this.selectBatch = this.data.runningBatchOrder;
-                    this.triggerChange();
+                if (this.selectBatch !== this.data.runningBatchOrder) {
+                    // 当前执行中批次变化且用户没有进行主动选择批次，每次自动选中正在执行的批次
+                    if (this.isAutoSelectRunningBatch) {
+                        this.selectBatch = this.data.runningBatchOrder;
+                        this.triggerChange();
+                    }
                 }
+                this.showConfirmActionPanel();
             },
         },
         created () {
             this.list = Object.freeze(this.data.rollingTasks);
-            this.selectBatch = this.data.runningBatchOrder;
-            this.isAutoSelectRunningBatch = false;
+            // url 上面有 batch 参数默认选中 url 指定的批次
+            const URLQueryBatch = parseInt(this.$route.query.batch, 10);
+            this.selectBatch = URLQueryBatch > -1 ? URLQueryBatch : this.data.runningBatchOrder;
+            this.isAutoSelectRunningBatch = !(URLQueryBatch > -1);
         },
         mounted () {
             this.initRender();
+
             setTimeout(() => {
-                // url 上面有 batch 参数
-                const defaultBatch = parseInt(this.$route.query.batch, 10) < 0
-                    ? this.data.runningBatchOrder
-                    : parseInt(this.$route.query.batch, 10);
-                this.handleLocalChange(defaultBatch);
-                this.isAutoSelectRunningBatch = true;
-            }, 300);
+                this.handleGoBatch(this.selectBatch);
+            });
             const resizeHandler = _.throttle(() => {
                 this.initRender();
             }, 20);
@@ -352,9 +347,16 @@
              * @desc 跳转到指定批次，选中的批次居中显示
              * @param { Number } selectBatch
              */
-            handleLocalChange (selectBatch) {
+            handleLocalBatchChange (selectBatch) {
                 this.selectBatch = selectBatch;
                 this.isAutoSelectRunningBatch = false;
+                this.handleGoBatch(selectBatch);
+                this.triggerChange();
+            },
+            /**
+             * @desc 跳转到指定批次
+             */
+            handleGoBatch (selectBatch) {
                 const $listEl = this.$refs.list;
                 const {
                     width: containerWidth,
@@ -363,8 +365,6 @@
                 } = $listEl.getBoundingClientRect();
                 const $itemListEl = $listEl.querySelectorAll('.batch-item');
 
-                this.triggerChange();
-
                 const $locationBatchItemEl = $itemListEl[selectBatch - 1];
                 const {
                     width: locationItemWidth,
@@ -402,7 +402,6 @@
                 this.isPrePageBtnDisabled = this.scrollPosition === 0;
                 this.isNextPageBtnDisabled = this.scrollPosition === maxOffset;
             },
-
             /**
              * @desc 上一页
              */

diff --git a/src/frontend/src/views/executive-history/step-detail/index.vue b/src/frontend/src/views/executive-history/step-detail/index.vue
@@ -27,7 +27,9 @@
 
 <template>
     <div class="executive-history-step">
-        <task-status ref="taskStatus" @on-init="handleTaskInit">
+        <task-status
+            ref="taskStatus"
+            @on-init="handleTaskInit">
             <rolling-batch
                 v-if="data.isRollingTask"
                 :value="params.batch"