seecoder-devcloud-frontend/src/views/Project/Invite.vue

<template>
<div class="container">
  <el-row class="row-item title">
    <h4>生成邀请码</h4>
  </el-row>
  <div class="row-item">
    <span>邀请码：</span>
    <span>{{relateCode}}</span>
  </div>
  <div class="row-item">
    <span>
      <el-button
        @click="generateRelateCode()"
        type="primary"
        size="small"
      >
        生成
      </el-button>
    </span>
  </div>
  <el-divider content-position="left">或</el-divider>
  <el-row class="row-item title">
    <h4>关联其他项目</h4>
  </el-row>
  <el-row style="row-item">
    <el-input v-model="targetCode" placeholder="请输入要关联的项目生成的邀请码" style="width: 270px"></el-input>
    <el-button
      @click="relate()"
      type="primary"
      size="small"
      style="margin-left: 16px"
    >
      关联
    </el-button>
  </el-row>
</div>
</template>

<script>
import { ProjectAPI } from '@/api';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      relateCode: '',
      targetCode: '',
    };
  },
  methods: {
    async generateRelateCode() {
      this.relateCode = await ProjectAPI.generateRelateCode(this.$store.state.workspace.currentProjectId);
      ElMessage.success('邀请码将在5分钟后失效，请及时完成操作！');
    },
    async relate() {
      await ProjectAPI.relateProject(this.$store.state.workspace.currentProjectId, this.targetCode);
      ElMessage.success('关联成功');
      this.targetCode = '';
    },
  },
};
</script>

<style scoped>
.container {
  margin: 50px 100px;
  width: 30%
}

.row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  color: #333333
}
</style>