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 @click="copy(relateCode)">{{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';

import { copy } from '@/utils/clipboard';

export default {
  data() {
    return {
      relateCode: '',
      targetCode: '',
    };
  },
  methods: {
    copy,
    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).then((res) => {
        if (res === '验证码有效时间为五分钟，已过期') {
          ElMessage.warning('验证码有效时间为五分钟，已过期');
        } else if (res === '不可将本项目与自身关联！') {
          ElMessage.error('不可将本项目与自身关联！');
        } else if (res === '该项目已与目标项目关联过，无须重复关联') {
          ElMessage.warning('该项目已与目标项目关联过，无须重复关联');
        } else {
          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>