feat: 完成流水线编辑功能。

mock/routers/pipeline.js

@@ -13,14 +13,42 @@ router.delete('', (req, res) => {
 
 router.get('', (req, res) => {
   res.json(wrapper({
-    configJson: {
-      code: 0,
-      data: {
-        configJson: 'string',
-        id: 0,
+    configJson: JSON.stringify([
+      {
+        name: 'java-image-build',
+        active: true,
+        configs: {
+          repoUrl: '#todo',
+          branchName: '#todo',
+          jarName: '#todo',
+        },
+      },
+      {
+        name: 'k8s-namespace',
+        active: true,
+        configs: {
+        },
+      },
+      {
+        name: 'k8s-deployment',
+        active: true,
+        configs: {
+          port: '#todo',
+        },
+      },
+      {
+        name: 'k8s-service',
+        active: true,
+        configs: {
+        },
+      },
+      {
+        name: 'k8s-ingress',
+        active: true,
+        configs: {
+        },
       },
-      msg: 'string',
-    },
+    ]),
     id: req.params.pipelineId,
   }));
 });

mock/routers/stage.js

@@ -9,21 +9,80 @@ const { Random } = Mock;
 router.get('',
   (req, res) => {
     res.json(wrapper(
-      Mock.mock({
-        'data|4': [
-          {
-            name: '不显示的后端用字段',
-            'id|+1': 0,
-            title: Random.cname(),
-            description: Random.csentence(5, 10),
-            'config|1-4': [{
-              name: '字段名',
-              value: Random.cword(),
-              'editable|1': [true, false],
-            }],
-          },
-        ],
-      }).data,
+      [
+        {
+          name: 'java-image-build',
+          title: '1',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: true,
+            },
+            {
+              name: 'branchName',
+              value: '#todo',
+              editable: true,
+            },
+            {
+              name: 'jarName',
+              value: '#todo',
+              editable: true,
+            },
+          ],
+        },
+        {
+          name: 'k8s-namespace',
+          title: '2',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        },
+        {
+          name: 'k8s-deployment',
+          title: '3',
+          skippable: false,
+          description: 'desc',
+          configs: [{
+            name: 'port',
+            value: '#todo',
+            editable: true,
+          }],
+        },
+        {
+          name: 'k8s-service',
+          title: '4',
+          description: 'desc',
+          skippable: true,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        },
+        {
+          name: 'k8s-ingress',
+          title: '5',
+          description: 'desc',
+          skippable: false,
+          configs: [
+            {
+              name: 'repoUrl',
+              value: '#todo',
+              editable: false,
+            },
+          ],
+        }],
     ));
   });
 

src/element-plus.ts

@@ -3,6 +3,7 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
+  ElCheckbox,
   ElContainer,
   ElDivider,
   ElHeader,
@@ -38,6 +39,7 @@ locale.use(ZH_CN);
 export const Components = [
   ElAside,
   ElRow,
+  ElCheckbox,
   ElContainer,
   ElHeader,
   ElMain,

src/views/Project/Pipeline.vue

@@ -128,13 +128,27 @@
           <span>编辑流水线配置</span>
         </template>
         <ElSteps :active="activeStep">
-          <ElStep v-for="(stage, index) in stages" :key="index" :title="stage.title" :description="stage.description">
+          <ElStep
+            v-for="(config, index) in pipelineConfig"
+            :key="index"
+            :title="getStage(config.name).title"
+            :description="getStage(config.name).description"
+          >
           </ElStep>
         </ElSteps>
-        <div class="edit-pipeline-form" v-for="(stage, index) in stages" :key="index" v-show="activeStep === index">
-          <ElForm label-width="80px">
-            <ElFormItem v-for="(item, index) in stage.config" :key="index" :label="item.name">
-              <ElInput :disabled="!item.editable" v-model="item.value"></ElInput>
+        <div class="edit-pipeline-form" v-for="(config, index) in pipelineConfig" :key="index" v-show="activeStep === index">
+          <ElForm label-width="160px">
+            <div style="margin: 20px 0 20px 160px;">
+              <ElCheckbox
+                :disabled="!getStage(config.name).skippable"
+                v-model="config.active"
+              >启用该阶段</ElCheckbox>
+            </div>
+            <ElFormItem v-for="(val, key) in config.configs" :key="key" :label="key">
+              <ElInput
+                :disabled="!getStage(config.name).configs.find((config) => config.name === key).editable"
+                v-model="config.configs[key]"
+              ></ElInput>
             </ElFormItem>
           </ElForm>
         </div>
@@ -275,6 +289,19 @@ export default {
     isLastStep() {
       return this.activeStep === this.stages.length - 1;
     },
+    stageConfigsBase() {
+      return this.stages.map((stage) => ({
+        name: stage.name,
+        active: true,
+        configs: stage.configs.map(({ name, value, editable }) => ({
+          [name]: value,
+          editable,
+        })).reduce((prev, curr) => Object.assign(prev, curr), {}),
+      }));
+    },
+    stageConfigs() {
+      return this.stageConfigsBase;
+    },
   },
   async mounted() {
     this.pipelines = await PipelineAPI.getPipelinesByProjectId(this.$store.state.workspace.currentProjectId);
@@ -315,11 +342,11 @@ export default {
         case 'edit': {
           this.showPipelineEditModal = true;
           this.editingPipelineId = id;
-          // TODO: stage与config进行合并生成form-model用于渲染和更改
-          this.pipelineConfig = await PipelineAPI.getPipeline({
+          const config = (await PipelineAPI.getPipeline({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
-          }).configJson || '{}';
+          })).configJson;
+          this.pipelineConfig = JSON.parse(config || '{}');
           break;
         }
         case 'delete': {
@@ -338,7 +365,7 @@ export default {
       await PipelineAPI.updatePipeline({
         projectId: this.$store.state.workspace.currentProjectId,
         pipelineId: this.editingPipelineId,
-        configJson: JSON.stringify(JSON.parse(this.pipelineConfig)),
+        configJson: JSON.stringify(this.pipelineConfig),
       });
       this.showPipelineEditModal = false;
     },
@@ -361,6 +388,9 @@ export default {
     async deleteProduction(id) {
       await PipelineAPI.deleteInstance(id);
     },
+    getStage(stageName) {
+      return this.stages.find((stage) => stage.name === stageName);
+    },
   },
 };
 </script>