feat: 显示已关联的项目

src/api/devcloud/project.ts

@@ -35,3 +35,5 @@ export const relateProject = (projectId: number, code: string) => axios.post(
 export const getCommits = (projectId: number) => axios.get(
   `${COMMIT_PREFIX}/list?projectId=${projectId}`,
 );
+
+export const getRelatedProjects = (projectId: number) => axios.get(`${PROJECT_PREFIX}/relate/${projectId}`);

src/views/Project/Invite.vue

@@ -5,7 +5,7 @@
   </el-row>
   <div class="row-item">
     <span>邀请码：</span>
-    <span @click="copy(relateCode)">{{relateCode}}</span>
+    <span @click="copy(relateCode)" class="cursor">{{relateCode}}</span>
   </div>
   <div class="row-item">
     <span>
@@ -22,7 +22,7 @@
   <el-row class="row-item title">
     <h4>关联其他项目</h4>
   </el-row>
-  <el-row style="row-item">
+  <el-row class="row-item">
     <el-input v-model="targetCode" placeholder="请输入要关联的项目生成的邀请码" style="width: 270px"></el-input>
     <el-button
       @click="relate()"
@@ -33,6 +33,22 @@
       关联
     </el-button>
   </el-row>
+  <el-divider></el-divider>
+  <el-row class="row-item title">
+    <h4>已关联的项目</h4>
+  </el-row>
+  <div class="project-list">
+    <div v-if="relatedProjects.length === 0">
+      暂无关联的项目！
+    </div>
+    <ProjectCard
+      v-for="project in relatedProjects"
+      :key="project.id"
+      v-bind="project"
+      @click="handleChange(project.id)"
+      style="cursor: pointer"
+      ></ProjectCard>
+  </div>
 </div>
 </template>
 
@@ -41,14 +57,23 @@ import { ProjectAPI } from '@/api';
 import { ElMessage } from 'element-plus';
 
 import { copy } from '@/utils/clipboard';
+import ProjectCard from '@/components/ProjectCard.vue';
+import { WorkspaceDispatcher } from '@/store/dispatchers';
 
 export default {
+  components: {
+    ProjectCard,
+  },
   data() {
     return {
       relateCode: '',
       targetCode: '',
+      relatedProjects: [],
     };
   },
+  async mounted() {
+    this.relatedProjects = await ProjectAPI.getRelatedProjects(this.$store.state.workspace.currentProjectId);
+  },
   methods: {
     copy,
     async generateRelateCode() {
@@ -69,6 +94,10 @@ export default {
       });
       this.targetCode = '';
     },
+    handleChange(projectId) {
+      WorkspaceDispatcher.changeProject(projectId);
+      this.$router.push(`/project/${projectId}/schedule`);
+    },
   },
 };
 </script>
@@ -76,7 +105,7 @@ export default {
 <style scoped>
 .container {
   margin: 50px 100px;
-  width: 30%
+  width: 80%
 }
 
 .row-item {
@@ -85,8 +114,14 @@ export default {
   align-items: center;
   margin-bottom: 10px;
 }
-
+.cursor {
+  cursor: pointer;
+}
 .title {
   color: #333333
 }
+.project-list {
+  display:flex;
+  flex-wrap: wrap;
+}
 </style>