feat：流水线编辑页面，增加更多操作 TencentBlueKing#10784

# Reviewed, transaction id: 19293
useryuyu · Sep 24, 2024 · 4762ac5 · 4762ac5
1 parent 94d58b7
commit 4762ac5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 74 deletions.
diff --git a/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionDiffEntry.vue b/src/frontend/devops-pipeline/src/components/PipelineDetailTabs/VersionDiffEntry.vue
@@ -1,6 +1,7 @@
 <template>
-    <span>
+    <span :class="{ 'display': !showButton }">
         <bk-button
+            v-if="showButton"
             :text="text"
             :outline="outline"
             :theme="theme"
@@ -23,7 +24,10 @@
                 class="diff-version-dialog-content"
                 v-bkloading="{ isLoading: isLoadYaml, color: '#1d1d1d' }"
             >
-                <header class="diff-version-header">
+                <header
+                    class="diff-version-header"
+                    v-if="showButton"
+                >
                     <VersionSelector
                         ext-cls="dark-theme-select-trigger"
                         ext-popover-cls="dark-theme-select-menu"
@@ -93,6 +97,10 @@
             canSwitchVersion: {
                 type: Boolean,
                 default: true
+            },
+            showButton: {
+                type: Boolean,
+                default: true
             }
         },
         data () {
@@ -202,4 +210,7 @@
             }
         }
     }
+    .display{
+        display: none;
+    }
 </style>
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/EditHeader.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/EditHeader.vue
@@ -107,35 +107,13 @@
             />
         </aside>
 
-        <bk-dialog
-            v-model="showVersionDiffDialog"
-            render-directive="if"
-            header-position="left"
-            :draggable="false"
-            ext-cls="diff-version-dialog"
-            width="90%"
-            :title="$t('diff')"
+        <version-diff-entry
+            ref="diffdialog"
+            :version="currentVersion"
+            :latest-version="activeVersion"
+            :show-button="false"
         >
-            <div
-                class="diff-version-dialog-content"
-                v-bkloading="{ isLoading: isLoadYaml, color: '#1d1d1d' }"
-            >
-                <div class="pipeline-yaml-diff-wrapper">
-                    <yaml-diff
-                        :old-yaml="activeYaml"
-                        height="100%"
-                        :new-yaml="currentYaml"
-                    />
-                </div>
-            </div>
-            <footer slot="footer">
-                <bk-button
-                    @click="showVersionDiffDialog = false"
-                >
-                    {{ $t('close') }}
-                </bk-button>
-            </footer>
-        </bk-dialog>
+        </version-diff-entry>
     </div>
 </template>
 
@@ -150,28 +128,18 @@
     import { mapActions, mapGetters, mapState } from 'vuex'
     import PipelineBreadCrumb from './PipelineBreadCrumb.vue'
     import ReleaseButton from './ReleaseButton'
-    import YamlDiff from '@/components/YamlDiff'
+    import VersionDiffEntry from '@/components/PipelineDetailTabs/VersionDiffEntry.vue'
 
     export default {
         components: {
             PipelineBreadCrumb,
             ReleaseButton,
             ModeSwitch,
-            YamlDiff
+            VersionDiffEntry
         },
         props: {
             isSwitchPipeline: Boolean
         },
-        data () {
-            return {
-                isLoading: false,
-                isReleaseSliderShow: false,
-                showVersionDiffDialog: false,
-                isLoadYaml: false,
-                activeYaml: '',
-                currentYaml: ''
-            }
-        },
         computed: {
             ...mapState([
                 'pipelineMode'
@@ -189,7 +157,9 @@
                 isCurPipelineLocked: 'atom/isCurPipelineLocked',
                 isEditing: 'atom/isEditing',
                 checkPipelineInvalid: 'atom/checkPipelineInvalid',
-                draftBaseVersionName: 'atom/getDraftBaseVersionName'
+                draftBaseVersionName: 'atom/getDraftBaseVersionName',
+                hasDraftPipeline: 'atom/hasDraftPipeline',
+                isCommittingPipeline: 'atom/isCommittingPipeline'
             }),
             projectId () {
                 return this.$route.params.projectId
@@ -236,16 +206,17 @@
             activeVersion () {
                 return this.pipelineInfo?.releaseVersion ?? ''
             },
-            diffVersion () {
-                return this.currentVersion !== this.activeVersion
-            },
             actionConfMenus () {
                 const { projectId } = this.$route.params
                 return [
                     {
                         label: this.$t('diff'),
-                        handler: this.initDiff,
-                        disabled: !this.diffVersion,
+                        handler: () => {
+                            if (this.hasDraftPipeline) {
+                                this.$refs.diffdialog.initDiff()
+                            }
+                        },
+                        disabled: !this.hasDraftPipeline,
                         showTooltips: true
                     },
                     {
@@ -267,8 +238,8 @@
                     {
                         label: this.$t('deleteDraft'),
                         handler: this.handelDelete,
-                        disabled: !this.diffVersion && this.currentVersion !== 1,
-                        showTooltips: this.diffVersion || this.currentVersion === 1
+                        disabled: !this.hasDraftPipeline && !this.isCommittingPipeline,
+                        showTooltips: this.hasDraftPipeline || this.isCommittingPipeline
                     }
                 ]
             }
@@ -292,12 +263,10 @@
                 'saveDraftPipeline',
                 'setSaveStatus',
                 'updateContainer',
-                'fetchPipelineByVersion',
-                'requestPipeline'
+                'fetchPipelineByVersion'
             ]),
             ...mapActions('pipelines', [
                 'deletePipelineVersion',
-                'updatePipelineActionState',
                 'patchDeletePipelines'
             ]),
             async exec (debug) {
@@ -426,7 +395,7 @@
                     ])
                 ])
             },
-            async diffVersionDeleteConfirm () {
+            async deleteDraftConfirm () {
                 try {
                     await this.deletePipelineVersion({
                         projectId: this.projectId,
@@ -501,19 +470,6 @@
                     return ''
                 }
             },
-            async initDiff () {
-                if (this.diffVersion) {
-                    this.showVersionDiffDialog = true
-                    this.isLoadYaml = true
-                    const [activeYaml, currentYaml] = await Promise.all([
-                        this.fetchPipelineYaml(this.activeVersion),
-                        this.fetchPipelineYaml(this.currentVersion)
-                    ])
-                    this.activeYaml = activeYaml
-                    this.currentYaml = currentYaml
-                    this.isLoadYaml = false
-                }
-            },
             goDraftDebugRecord () {
                 if (this.canDebug) {
                     this.$router.push({
@@ -533,18 +489,17 @@
                     width: 470,
                     confirmLoading: true
                 }
-                if (this.diffVersion) {
+                if (this.isCommittingPipeline) {
                     this.$bkInfo({
                         ...commonConfig,
-                        subHeader: this.createSubHeader(this.pipelineSetting.pipelineName, this.draftBaseVersionName),
-                        confirmFn: this.diffVersionDeleteConfirm
+                        subTitle: this.$t('deleteDraftPipeline'),
+                        confirmFn: this.deletePipelineConfirm
                     })
-                }
-                if (this.currentVersion === 1) {
+                } else if (this.hasDraftPipeline) {
                     this.$bkInfo({
                         ...commonConfig,
-                        subTitle: this.$t('deleteDraftPipeline'),
-                        confirmFn: this.deletePipelineConfirm
+                        subHeader: this.createSubHeader(this.pipelineSetting.pipelineName, this.draftBaseVersionName),
+                        confirmFn: this.deleteDraftConfirm
                     })
                 }
             },

diff --git a/src/frontend/devops-pipeline/src/store/modules/atom/getters.js b/src/frontend/devops-pipeline/src/store/modules/atom/getters.js
@@ -51,6 +51,9 @@ export default {
     onlyBranchPipeline: state => {
         return state.pipelineInfo?.latestVersionStatus === VERSION_STATUS_ENUM.BRANCH
     },
+    isCommittingPipeline: state => {
+        return state.pipelineInfo?.latestVersionStatus === VERSION_STATUS_ENUM.COMMITTING
+    },
     isReleaseVersion: state => {
         return state.activePipelineVersion?.version === state.pipelineInfo?.releaseVersion && state.activePipelineVersion?.status === VERSION_STATUS_ENUM.RELEASED
     },