feat: 完成Pipeline页功能

mock/index.js

@@ -11,11 +11,13 @@ app.use(bodyParser.json());
 // 添加跨域
 app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
-  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
-  res.header('Access-Control-Allow-Headers', 'Content-Type');
-  res.header('Access-Control-Allow-Headers', 'Authorization');
-  next();
+  res.header('Access-Control-Allow-Methods', '*');
+  res.header('Access-Control-Allow-Headers', '*');
+  if (req.method === 'OPTIONS') {
+    res.sendStatus(200);
+  } else {
+    next();
+  }
 });
 
 const prefix = '/api';

mock/routers/deployment.js

@@ -6,11 +6,11 @@ const wrapper = require('../wrapper');
 
 const { Random } = Mock;
 
-router.delete((_, res) => {
+router.delete('', (_, res) => {
   res.json(wrapper('success'));
 });
 
-router.post((_, res) => {
+router.post('', (_, res) => {
   res.json(wrapper('success'));
 });
 

mock/routers/pipeline.js

@@ -7,11 +7,11 @@ const wrapper = require('../wrapper');
 
 const { Random } = Mock;
 
-router.delete((req, res) => {
+router.delete('', (req, res) => {
   res.json(wrapper('success'));
 });
 
-router.get((req, res) => {
+router.get('', (req, res) => {
   res.json(wrapper({
     configJson: {
       code: 0,
@@ -25,10 +25,14 @@ router.get((req, res) => {
   }));
 });
 
-router.post((req, res) => {
+router.post('', (req, res) => {
   res.json(wrapper('success'));
 });
 
+router.get('/templates', (req, res) => {
+  res.json(wrapper(['Java', 'MySQL', 'Node', 'Go', 'Android']));
+});
+
 router.put('/config', (req, res) => {
   res.json(wrapper('success'));
 });

src/api/pipeline.ts

@@ -29,6 +29,8 @@ export const createPipeline = (createPipelinePayload: CreatePipelinePayload) =>
 export const updatePipeline = (updatePipelinePayload: UpdatePipelinePayload) => axios.put(`${PIPELINE_PREFIX}/config`,
   updatePipelinePayload);
 
+export const getPipelineTemplates = () => axios.get(`${PIPELINE_PREFIX}/templates`);
+
 export const getPipelineHistory = (pipeline: PipelinePayload) => axios.get(`${PIPELINE_PREFIX}/history/list`, {
   params: pipeline,
 });

src/components/SideBar.vue

@@ -24,40 +24,6 @@
 <script>
 export default {
   name: 'SideBar',
-  data() {
-    return {
-      selectedIndex: 0,
-    };
-  },
-  methods: {
-    handleClick(e) {
-      const value = e.target.attributes.target.nodeValue ? e.target.attributes.target.nodeValue : '';
-      switch (value) {
-        case 'schedule':
-          this.selectedIndex = 0;
-          break;
-        case 'taskList':
-          this.selectedIndex = 1;
-          break;
-        case 'bugList':
-          this.selectedIndex = 2;
-          break;
-        case 'statistics':
-          this.selectedIndex = 3;
-          break;
-        case 'pipeline':
-          this.selectedIndex = 4;
-          break;
-        case 'apitest':
-          this.selectedIndex = 5;
-          break;
-        default:
-          throw new TypeError('Unknown Tab Value!');
-      }
-
-      this.$emit('change', value);
-    },
-  },
 };
 </script>
 

src/element-plus.ts

@@ -28,6 +28,11 @@ import {
   ElTabPane,
 } from 'element-plus';
 
+import ZH_CN from 'element-plus/lib/locale/lang/zh-cn';
+import locale from 'element-plus/lib/locale';
+
+locale.use(ZH_CN);
+
 export const Components = [
   ElAside,
   ElRow,

src/store/dispatchers/workspace.ts

@@ -4,11 +4,12 @@ export const refreshProjectList = () => {
   store.dispatch('refreshProjectList', store.state.user.id);
 };
 
-export const changeProject = (projectId: number) => {
-  store.dispatch('changeProject', { projectId });
-};
-
 export const changeGroup = (groupId: number) => {
   store.dispatch('changeGroup', { groupId });
   store.dispatch('resetCurrentProject');
 };
+
+export const changeProject = (projectId: number) => {
+  changeGroup(store.getters.getGroupIdFromProjectId(projectId));
+  store.dispatch('changeProject', { projectId });
+};

src/store/modules/workspace.ts

@@ -66,6 +66,12 @@ const getters: GetterTree<WorkspaceState, RootState> = {
   projectListOfCurrentGroup(state) {
     return state.projectList.filter((project) => project.groupId === state.currentGroupId);
   },
+  getGroupIdFromProjectId(state) {
+    return (projectId: number) => {
+      const p = Array.prototype.find.call(state.projectList, (project) => project.id === projectId) as Project;
+      return p.groupId;
+    };
+  },
   currentProjectInfo(state) {
     return Array.prototype.find.call(state.projectList, (project) => project.id === state.currentProjectId)
       || {

src/views/Project/Pipeline.vue

@@ -134,7 +134,6 @@
           <span>编辑流水线配置</span>
           <span class="button-group">
             <ElButton type="text">脚本教程</ElButton>
-            <ElButton type="text">模板详解</ElButton>
           </span>
         </template>
         <ElInput
@@ -159,7 +158,12 @@
         }"
         destroy-on-close
       >
-        <template #title>创建流水线</template>
+        <template #title>
+          <span>创建流水线</span>
+          <span class="button-group">
+            <ElButton type="text">模板详解</ElButton>
+          </span>
+        </template>
         <ElForm
           :model="createPipelineForm"
           ref="createPipelineForm"
@@ -237,7 +241,7 @@
         <ElTableColumn>
           <template #default="scope">
             <ElButton type="text" @click="deleteProduction(scope.row.id)">
-              <i class="el-icon-delete-solid"></i>
+              <i class="el-icon-delete"></i>
             </ElButton>
           </template>
         </ElTableColumn>
@@ -267,7 +271,7 @@ export default {
       pipelineConfig: '',
       jsonValid: true,
       editingPipelineId: -1,
-      templates: ['Java项目', 'MySQL'],
+      templates: [],
       createPipelineForm: {
         name: '',
         template: '',
@@ -277,6 +281,7 @@ export default {
   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();
   },
   methods: {
     timeFormatter: (row, property) => `${row[property].year}/${row[property].month}/${row[property].day} `

src/views/ProjectContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <el-aside width="65">
-    <SideBar @change="handleTabChange"></SideBar>
+    <SideBar></SideBar>
   </el-aside>
   <el-main class="container">
     <router-view></router-view>
@@ -9,14 +9,14 @@
 
 <script>
 import SideBar from '@/components/SideBar.vue';
+import { WorkspaceDispatcher } from '@/store/dispatchers';
 
 export default {
   name: 'ProjectContainer',
   components: { SideBar },
-  methods: {
-    handleTabChange(value) {
-      this.$router.push(value);
-    },
+  mounted() {
+    const { projectId } = this.$route.params;
+    WorkspaceDispatcher.changeProject(parseInt(projectId, 10));
   },
 };
 </script>