seecoder-devcloud-frontend/src/components/FileReviewAddDrawer.vue

<template>
  <el-drawer v-model="showDrawer" :size="650" :before-close="handleDrawerClose">
    <template #title>
      <h3>创建新的文件评审任务</h3>
    </template>
    <div class="drawer-content">
      <el-select v-model="fileReviewForm.branch" placeholder="请选择需要评审的分支" @change="changeBranch">
        <el-option v-for="item in branchOptions" :key="item" :value="item" :label="item"/>
      </el-select>
      <div>选择需要评审的文件</div>
      <el-tree :load="loadNode" :props="fileListProps" lazy show-checkbox ref="fileTree" node-key="path"></el-tree>
      <el-select v-model="fileReviewForm.reviewerList" multiple placeholder="请选择评审人，可以通过手机号邀请">
        <el-option v-for="item in reviewerOption" :key="item.id" :label="item.label" :value="item.value"/>
      </el-select>
      <el-popover width="230" trigger="click">
        <div class="popoverContent">
          <el-input v-model="phoneNumber" placeholder="请输入手机号码"></el-input>
          <el-button icon="el-icon-search" circle size="mini" @click="inviteUser"></el-button>
        </div>
        <template #reference><el-button type="primary" style="margin-left: 20px">邀请用户</el-button></template>
      </el-popover>
      <el-input v-model="fileReviewForm.title" placeholder="请输入标题" minlength="1" maxlength="20" show-word-limit></el-input>
      <el-button @click="createFileReview" type="success" style="display:block">创建</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { CodeReviewAPI } from '../api';

export default {
  name: 'FileReviewAddDrawer',
  data() {
    return {
      showDrawer: false,
      fileReviewForm: {
        projectId: -1,
        creatorId: -1,
        reviewerList: [],
        fileList: [],
        branch: '',
        title: '',
      },
      phoneNumber: '',
      branchOptions: [],
      fileListProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf',
      },
      fileList: [{
        label: 'file1',
        path: '',
      }],
      reviewerOption: [{
        label: '',
        value: -1,
      }],
      nodeTreeConfig: {
        nodeLevel0: {},
        resolveLevel0: {},
      },
    };
  },
  computed: {
    currentProjectInfo() {
      return this.$store.getters.currentProjectInfo;
    },
    currentUser() {
      return this.$store.state.user;
    },
    projectMemberList() {
      return this.$store.getters.userOptions;
    },
  },
  methods: {
    show() {
      this.showDrawer = true;
    },
    async changeBranch() {
      this.fileList = await CodeReviewAPI.getRepositoryTree(this.fileReviewForm.projectId, this.fileReviewForm.branch);
      this.nodeTreeConfig.nodeLevel0.childNodes = [];
      this.loadNode(this.nodeTreeConfig.nodeLevel0, this.nodeTreeConfig.resolveLevel0);
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        this.nodeTreeConfig.nodeLevel0 = node;
        this.nodeTreeConfig.resolveLevel0 = resolve;
        return resolve(this.fileList);
      }
      if (node.level > 0) {
        const subTree = await CodeReviewAPI.getSubTree(this.fileReviewForm.projectId, this.fileReviewForm.branch, node.data.path);
        return resolve(subTree);
      }
      return resolve([]);
    },
    createFileReview() {
      this.fileReviewForm.fileList = this.$refs.fileTree.getCheckedKeys();
      console.log(this.fileReviewForm);
      CodeReviewAPI.createFileReview(this.fileReviewForm).then(
        (res) => {
          this.showDrawer = false;
          this.handleDrawerClose(
            () => {
              console.log('finishAdd');
            },
          );
        },
      );
    },
    async inviteUser() {
      const user = await CodeReviewAPI.inviteUser(this.phoneNumber);
      if (user !== undefined) {
        this.reviewerOption.push({
          label: user.username,
          value: user.id,
        });
        this.fileReviewForm.reviewerList.push(user.id);
      }
      this.phoneNumber = '';
    },
    handleDrawerClose(done) {
      this.fileReviewForm.reviewerList = [];
      this.fileReviewForm.fileList = [];
      this.title = '';
      this.branch = 'master';
      done();
    },
  },
  async mounted() {
    this.fileReviewForm.projectId = this.currentProjectInfo.id;
    this.fileReviewForm.creatorId = this.currentUser.id;
    this.reviewerOption = this.projectMemberList;
    const branches = await CodeReviewAPI.getProjectBranches(this.currentProjectInfo.id);
    Object.keys(branches).forEach(
      (key) => {
        this.branchOptions.push(branches[key].name);
      },
    );
    [this.fileReviewForm.branch] = this.branchOptions;
    this.fileList = await CodeReviewAPI.getRepositoryTree(this.fileReviewForm.projectId, this.fileReviewForm.branch);
  },
};
</script>
<style lang="scss" scoped>
.drawer-content {
  width: 100%;
  padding: 10px;
  > * {
    margin-top: 10px;
  }
}
.el-tree {
  border-style: solid;
  border-width: 1px;
  border-color: gainsboro;
  border-radius: 5px;
}
.el-select {
  width: 60%;
}
.popoverContent {
  > * {
    display: inline-block;
  }
}
::v-deep {
  .el-tree {
    .el-tree-node__content {
      height: 35px;
    }
  }
}
</style>