Merge pull request #10069 from vhwweng/issue_10065

feat: 流水线构建历史表格，拖拽表格列宽记忆功能 #10065
TencentBlueKing · Mar 6, 2024 · 0ef37bd · 0ef37bd
2 parents 51dafc3 + 9624471
commit 0ef37bd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 27 deletions.
diff --git a/src/frontend/devops-pipeline/src/components/BuildHistoryTable/index.vue b/src/frontend/devops-pipeline/src/components/BuildHistoryTable/index.vue
@@ -457,11 +457,9 @@
             },
             column () {
                 Object.keys(this.BUILD_HISTORY_TABLE_COLUMNS_MAP).map((item) => {
-                    if (this.customColumn.includes(item)) {
-                        const localStorageVal = localStorage.getItem(`${item}Width`)
-                        if (localStorageVal) {
-                            this.BUILD_HISTORY_TABLE_COLUMNS_MAP[item].width = localStorageVal
-                        }
+                    const localStorageVal = localStorage.getItem(`${item}Width`)
+                    if (localStorageVal) {
+                        this.BUILD_HISTORY_TABLE_COLUMNS_MAP[item].width = localStorageVal
                     }
                     return item
                 })
@@ -578,10 +576,7 @@
                 }
             },
             handleDragend (newWidth, oldWidth, column) {
-                if (this.customColumn.includes(column.property)) {
-                    localStorage.setItem(`${column.property}Width`, newWidth)
-                }
-
+                localStorage.setItem(`${column.property}Width`, newWidth)
                 this.BUILD_HISTORY_TABLE_COLUMNS_MAP[column.property].width = newWidth
             },
             getArchiveUrl ({ id: buildNo }, type = '', codelib = '') {

diff --git a/src/frontend/devops-pipeline/src/mixins/pipelineConstMixin.js b/src/frontend/devops-pipeline/src/mixins/pipelineConstMixin.js
@@ -6,7 +6,7 @@ const pipelineConstMixin = {
                     index: 0,
                     prop: 'buildNum',
                     label: this.$t('buildNum'),
-                    width: 120
+                    width: localStorage.getItem('buildNumWidth') ? localStorage.getItem('buildNumWidth') : 120
                 },
                 stageStatus: {
                     index: 1,
@@ -24,62 +24,67 @@ const pipelineConstMixin = {
                     index: 3,
                     prop: 'startType',
                     label: this.$t('history.triggerType'),
-                    width: 120
+                    width: localStorage.getItem('triggerTypeWidth') ? localStorage.getItem('triggerTypeWidth') : 120
                 },
                 queueTime: {
                     index: 4,
                     prop: 'queueTime',
                     label: this.$t('history.tableMap.queueTime'),
-                    width: 120
+                    width: localStorage.getItem('queueTimeWidth') ? localStorage.getItem('queueTimeWidth') : 120
                 },
                 startTime: {
                     index: 5,
                     prop: 'startTime',
                     label: this.$t('history.tableMap.startTime'),
-                    width: 120
+                    width: localStorage.getItem('startTimeWidth') ? localStorage.getItem('startTimeWidth') : 120
                 },
                 endTime: {
                     index: 6,
                     prop: 'endTime',
                     label: this.$t('history.tableMap.endTime'),
-                    width: 120
+                    width: localStorage.getItem('endTimeWidth') ? localStorage.getItem('endTimeWidth') : 120
                 },
                 executeTime: {
                     index: 7,
                     prop: 'executeTime',
-                    label: this.$t('details.totalCost')
+                    label: this.$t('details.totalCost'),
+                    width: localStorage.getItem('executeTimeWidth') ? localStorage.getItem('executeTimeWidth') : 120
                 },
                 artifactList: {
                     index: 8,
                     prop: 'artifactList',
                     label: this.$t('history.artifactList'),
-                    width: 180
+                    width: localStorage.getItem('artifactListWidth') ? localStorage.getItem('artifactListWidth') : 180
                 },
                 appVersions: {
                     index: 9,
                     prop: 'appVersions',
-                    label: this.$t('history.tableMap.appVersions')
+                    label: this.$t('history.tableMap.appVersions'),
+                    width: localStorage.getItem('appVersionsWidth') ? localStorage.getItem('appVersionsWidth') : 120
                 },
                 remark: {
                     index: 10,
                     prop: 'remark',
-                    label: this.$t('history.remark')
+                    label: this.$t('history.remark'),
+                    width: localStorage.getItem('remarkWidth') ? localStorage.getItem('remarkWidth') : 120
                 },
                 recommendVersion: {
                     index: 11,
                     prop: 'recommendVersion',
-                    label: this.$t('history.tableMap.recommendVersion')
+                    label: this.$t('history.tableMap.recommendVersion'),
+                    width: localStorage.getItem('recommendVersionWidth') ? localStorage.getItem('recommendVersionWidth') : 120
                 },
                 pipelineVersion: {
                     index: 12,
                     prop: 'pipelineVersion',
-                    label: this.$t('history.tableMap.pipelineVersion')
+                    label: this.$t('history.tableMap.pipelineVersion'),
+                    width: localStorage.getItem('pipelineVersionWidth') ? localStorage.getItem('pipelineVersionWidth') : 120
                 },
                 entry: {
                     index: 12,
                     prop: 'entry',
                     label: this.$t('history.tableMap.entry'),
-                    width: 120,
+                    width: localStorage.getItem('entryWidth') ? localStorage.getItem('entryWidth') : 120,
                     hiddenInHistory: true,
                     entries: [{
                         type: '',
@@ -99,17 +104,12 @@ const pipelineConstMixin = {
                 },
                 errorCode: {
                     index: 13,
-                    width: 280,
+                    width: localStorage.getItem('errorCodeWidth') ? localStorage.getItem('errorCodeWidth') : 280,
                     prop: 'errorCode',
                     label: this.$t('history.errorCode')
                 }
             }
         }
-    },
-    computed: {
-        customColumn () {
-            return ['material', 'stageStatus', 'errorCode']
-        }
     }
 }