feat: 流水线配置表单通过接口数据生成

mock/index.js

@@ -26,6 +26,7 @@ app.use(`${prefix}/users`, require('./routers/user'));
 app.use(`${prefix}/project`, require('./routers/project'));
 app.use(`${prefix}/pipelines`, require('./routers/pipeline'));
 app.use(`${prefix}/deployments`, require('./routers/deployment'));
+app.use(`${prefix}/stages`, require('./routers/stage'));
 
 app.listen(4000);
 

mock/routers/stage.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const router = require('express').Router();
+const Mock = require('mockjs');
+const wrapper = require('../wrapper');
+
+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,
+    ));
+  });
+
+module.exports = router;

src/element-plus.ts

@@ -10,6 +10,8 @@ import {
   ElMain,
   ElMenu,
   ElDialog,
+  ElSteps,
+  ElStep,
   ElIcon,
   ElInput,
   ElSubmenu,
@@ -41,6 +43,8 @@ export const Components = [
   ElMain,
   ElMenu,
   ElDialog,
+  ElSteps,
+  ElStep,
   ElLink,
   ElMenuItem,
   ElCarousel,

src/views/Project/Pipeline.vue

@@ -122,30 +122,26 @@
       </ElDialog>
       <ElDialog
         v-model="showPipelineEditModal"
-        :before-close="(done) => {
-          jsonValid=true;
-          done();
-        }"
         destroy-on-close
       >
         <template #title>
           <span>编辑流水线配置</span>
-          <span class="button-group">
-            <ElButton type="text">脚本教程</ElButton>
-          </span>
         </template>
-        <ElInput
-          type="textarea"
-          :rows="16"
-          placeholder="请输入流水线配置"
-          @input="lintJson"
-          v-model="pipelineConfig">
-        ></ElInput>
-        <pre v-if="!jsonValid" :innerText="hint"></pre>
+        <ElSteps :active="activeStep">
+          <ElStep v-for="(stage, index) in stages" :key="index" :title="stage.title" :description="stage.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>
+            </ElFormItem>
+          </ElForm>
+        </div>
         <template #footer>
-          <span class="dialog-footer">
-            <el-button type="primary" @click="handlePipelineUpdateConfirm" :disabled="!jsonValid">确 定</el-button>
-          </span>
+          <ElButton :disabled="activeStep == 0" @click="() => activeStep -= 1">上一步</ElButton>
+          <ElButton :disabled="isLastStep"  @click="() => activeStep += 1">下一步</ElButton>
+          <ElButton type="primary" :disabled="!isLastStep" @click="handlePipelineUpdateConfirm">确定</ElButton>
         </template>
       </ElDialog>
       <ElDialog
@@ -249,10 +245,7 @@
 </template>
 
 <script>
-import jsonlint from '@/utils/jsonlint';
-
 import { PipelineAPI } from '@/api';
-import debounce from '@/utils/debounce';
 
 export default {
   data() {
@@ -274,12 +267,20 @@ export default {
         name: '',
         template: '',
       },
+      stages: [],
+      activeStep: 0,
     };
   },
+  computed: {
+    isLastStep() {
+      return this.activeStep === this.stages.length - 1;
+    },
+  },
   async mounted() {
     this.pipelines = await PipelineAPI.getPipelinesByProjectId(this.$store.state.workspace.currentProjectId);
     this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
     this.templates = await PipelineAPI.getPipelineTemplates();
+    this.stages = await PipelineAPI.getStages();
   },
   methods: {
     timeFormatter: (row, property) => `${row[property].year}/${row[property].month}/${row[property].day} `
@@ -314,6 +315,7 @@ export default {
         case 'edit': {
           this.showPipelineEditModal = true;
           this.editingPipelineId = id;
+          // TODO: stage与config进行合并生成form-model用于渲染和更改
           this.pipelineConfig = await PipelineAPI.getPipeline({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
@@ -332,17 +334,6 @@ export default {
         }
       }
     },
-    // eslint-disable-next-line func-names
-    lintJson: debounce(function (value) {
-      this.jsonValid = true;
-      try {
-        const result = jsonlint.parse(value);
-        this.pipelineConfig = JSON.stringify(result, null, '  ');
-      } catch (e) {
-        this.jsonValid = false;
-        this.hint = `${value}\n${e}`;
-      }
-    }, 500),
     async handlePipelineUpdateConfirm() {
       await PipelineAPI.updatePipeline({
         projectId: this.$store.state.workspace.currentProjectId,
@@ -391,6 +382,9 @@ export default {
   width: 60%;
   margin: 0 auto;
 }
+.edit-pipeline-form {
+  margin-top: 20px;
+}
 .button-group {
   margin-left: 40px;
 }