BuildDeploy.vue 中优化构建流程的显示, 并在第一列添加一个 index 列

src/views/devops/app/BuildDeploy.vue

@@ -50,6 +50,11 @@
         height="480"
         style="width: 100%"
       >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+        />
         <el-table-column
           prop="appName"
           label="应用名"
@@ -80,11 +85,10 @@
         />
         <el-table-column
           prop="buildResult"
-          label="构建状态"
+          label="构建结果"
         >
           <template slot-scope="scope">
             <el-popover
-              v-if="scope.row.buildResult.code === 2"
               placement="bottom"
               title="构建进度"
               width="300"
@@ -105,31 +109,24 @@
                 />
               </el-steps>
               <el-button
+                v-if="scope.row.buildResult.code !== 4"
                 slot="reference"
                 type="text"
                 :style="{ color: scope.row.buildResult.color, fontWeight: 'bold' }"
               >
-                <i class="el-icon-loading" />
+                <i v-if="scope.row.buildResult.code === 2" class="el-icon-loading" />
                 {{ scope.row.buildResult.desc }}
               </el-button>
-            </el-popover>
-            <div v-else-if="scope.row.buildResult.code === 4">
               <el-button
+                v-else
+                slot="reference"
                 type="text"
                 :style="{ color: scope.row.buildResult.color, fontWeight: 'bold' }"
                 @click="handleBuildResult(scope.row)"
               >
                 {{ scope.row.buildResult.desc }}
               </el-button>
-            </div>
-            <div v-else>
-              <el-button
-                type="text"
-                :style="{ color: scope.row.buildResult.color, fontWeight: 'bold' }"
-              >
-                {{ scope.row.buildResult.desc }}
-              </el-button>
-            </div>
+            </el-popover>
           </template>
         </el-table-column>
         <el-table-column
@@ -237,6 +234,11 @@
           height="480"
           style="width: 100%"
         >
+          <el-table-column
+            fixed="left"
+            label="No"
+            type="index"
+          />
           <el-table-column
             prop="machineIpv4"
             label="机器地址"
@@ -281,30 +283,35 @@
             label="部署结果"
           >
             <template slot-scope="scope">
-              <el-button
-                v-if="scope.row.deployResult === '部署成功'"
-                type="text"
-              >
-                <span style="color: green">{{ scope.row.deployResult }}</span>
-              </el-button>
-              <el-button
-                v-else-if="scope.row.deployResult === '部署失败'"
-                type="text"
-              >
-                <span style="color: red">{{ scope.row.deployResult }}</span>
-              </el-button>
-              <el-button
-                v-else-if="scope.row.deployResult === '正在部署'"
-                type="text"
-              >
-                <span style="color: blue">{{ scope.row.deployResult }}</span>
-              </el-button>
-              <el-button
-                v-else
-                type="text"
+              <el-popover
+                placement="bottom"
+                title="部署进度"
+                width="300"
+                trigger="hover"
               >
-                <span>{{ scope.row.deployResult }}</span>
-              </el-button>
+                <el-steps
+                  :active="getCurrentStepIndex(scope.row.steps)"
+                  finish-status="success"
+                  direction="vertical"
+                  space="50px"
+                >
+                  <el-step
+                    v-for="step in scope.row.steps"
+                    :key="step.stepName"
+                    :title="step.stepName"
+                    :description="getStepDesc(step)"
+                    :status="getStepStatus(step.status)"
+                  />
+                </el-steps>
+                <el-button
+                  slot="reference"
+                  type="text"
+                  :style="{ color: scope.row.deployResult.color, fontWeight: 'bold' }"
+                >
+                  <i v-if="scope.row.deployResult.code === 2" class="el-icon-loading" />
+                  {{ scope.row.deployResult.desc }}
+                </el-button>
+              </el-popover>
             </template>
           </el-table-column>
           <el-table-column
@@ -318,6 +325,11 @@
                 size="mini"
                 @click="handleDeployApp(scope.row)"
               >部署</el-button>
+              <el-button
+                style="margin-top: 5px; margin-left: 5px"
+                size="mini"
+                @click="handleDeployLog(scope.row)"
+              >部署日志</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -355,10 +367,23 @@
           >
             <template slot-scope="scope">
               <el-button
-                size="mini"
-                type="success"
+                v-if="scope.row.buildResult.code !== 4"
+                slot="reference"
+                type="text"
+                :style="{ color: scope.row.buildResult.color, fontWeight: 'bold' }"
+              >
+                <i v-if="scope.row.buildResult.code === 2" class="el-icon-loading" />
+                {{ scope.row.buildResult.desc }}
+              </el-button>
+              <el-button
+                v-else
+                slot="reference"
+                type="text"
+                :style="{ color: scope.row.buildResult.color, fontWeight: 'bold' }"
                 @click="handleBuildResult(scope.row)"
-              >查看</el-button>
+              >
+                {{ scope.row.buildResult.desc }}
+              </el-button>
             </template>
           </el-table-column>
           <el-table-column
@@ -399,6 +424,11 @@
             width="280"
           >
             <template slot-scope="scope">
+              <el-button
+                style="margin-top: 5px; margin-left: 5px"
+                size="mini"
+                @click="handleBuildLogFile(scope.$index, scope.row)"
+              >日志</el-button>
               <el-button
                 style="margin-top: 5px; margin-left: 5px"
                 size="mini"
@@ -792,6 +822,9 @@ export default {
         this.$message.error(error.message)
       })
     },
+    handleBuildLogFile(row) {
+      this.$message.info('get build log file')
+    },
     handleDeployBuild(index, row) {
       const formData = new FormData()
       formData.append('buildLogId', row.buildLogId)
@@ -833,7 +866,7 @@ export default {
     },
     handleDeployList(index, row) {
       if (row.buildLogId === undefined) {
-        this.$message.error("应用尚未构建")
+        this.$message.error('应用尚未构建')
         return
       }
 
@@ -871,6 +904,9 @@ export default {
         this.$message.error(error.message)
       })
     },
+    handleDeployLog(row) {
+      this.$message.info('get deploy log')
+    },
     onClear() {
       this.getData()
     },
@@ -896,11 +932,11 @@ export default {
      * @returns {Number} 索引值
      */
     getCurrentStepIndex(steps) {
-      if (!steps || steps.length === 0) return 0;
+      if (!steps || steps.length === 0) return 0
       // 找到第一个状态不是 SUCCESS 的步骤索引
-      const index = steps.findIndex(step => step.status !== 'SUCCESS');
+      const index = steps.findIndex(step => step.status !== 'SUCCESS')
       // 如果全部都成功了，返回 steps.length 使进度条全绿
-      return index === -1 ? steps.length : index;
+      return index === -1 ? steps.length : index
     },
 
     /**
@@ -909,20 +945,20 @@ export default {
      */
     getStepDesc(step) {
       if (step.status === 'RUNNING') {
-        return '正在执行...';
+        return '正在执行...'
       }
-      if (step.status === 'FAILED' && step.errorMsg) {
+      if (step.status === 'FAILURE' && step.errorMsg) {
         // 如果报错，显示错误摘要（截取前30个字符防止气泡框撑爆）
         return step.errorMsg.length > 30
           ? step.errorMsg.substring(0, 30) + '...'
-          : step.errorMsg;
+          : step.errorMsg
       }
       if (step.status === 'SUCCESS' && step.endTime && step.startTime) {
         // 计算耗时（可选）
-        const duration = (new Date(step.endTime) - new Date(step.startTime)) / 1000;
-        return `耗时: ${duration.toFixed(1)}s`;
+        const duration = (new Date(step.endTime) - new Date(step.startTime)) / 1000
+        return `耗时: ${duration.toFixed(1)}s`
       }
-      return '';
+      return ''
     },
 
     /**
@@ -937,8 +973,8 @@ export default {
         'SUCCESS': 'success',
         'FAILED': 'error',
         'SKIPPED': 'wait'
-      };
-      return statusMap[backendStatus] || 'wait';
+      }
+      return statusMap[backendStatus] || 'wait'
     }
   }
 }