Situation-Awareness-Platform-Frontend/src/views/Mobile/Repo/Merge/Create/index.vue

<template>
  <div class="mt-20">
    <div class="w-[1200px]">
      <h1 class="mr-title">新建Pull Request</h1>
      <div class="text-CG600 text-xs mt-[16px]">
        你可以选择两个内容存在差异的分支，比较并查看它们的更改，并创建一个新的Pull Request。
      </div>
      <DataPanel :loading="loading" skeleton="true" class="mt-20" :card="false">
        <BranchCompare
          v-model:repoId="branchCompareData.repoId"
          v-model:targetRepoId="branchCompareData.targetRepoId"
          v-model:sourceId="branchCompareData.originId"
          v-model:targetId="branchCompareData.targetId"
          :repoList="originRepoList"
          :targetRepoList="targetRepoList"
          :branchList="originBranchList"
          :targetBranchList="targetBranchList"
          :showRepo="isFork"
          :isFork="isFork"
          @onSwitch="onSwitch"
        >
        </BranchCompare>
        <div class="mt-20 text-right">
          <d-button @click="toNext" variant="solid">下一步</d-button>
        </div>
      </DataPanel>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import BranchCompare from '@/components/BranchCompareFork/index.vue';
import getRepoId from '@/utils/getRepoId';
import { getRepo } from '@/api/repo';
import { getBranches } from '@/api/branch';
import { useRouter } from 'vue-router';
import { Message } from 'vue-devui/message';
const router = useRouter();
const loading = ref(false);

const branchCompareData = reactive({
  repoId: getRepoId('/'), // 源项目
  targetRepoId: getRepoId('/'), // 目标项目
  originId: '', // 源分支
  targetId: '' // 目标分支
});

const onSwitch = () => {
  [branchCompareData.originId, branchCompareData.targetId] = [
    branchCompareData.targetId,
    branchCompareData.originId
  ];
};

const isFork = ref(false); // 是否为fork项目
const originRepoList = ref([{ label: getRepoId('/'), value: getRepoId('/') }]);
const targetRepoList = ref([{ label: getRepoId('/'), value: getRepoId('/') }]);
const targetRepos = ref([]); // 最后获取目标项目id使用（等接口支持path后可去掉）
const originBranchList = ref([
  { label: '', value: '' } // 有初始值，可以撑开select下拉框
]);
const targetBranchList = ref([{ label: '', value: '' }]);

/**
 * 获取源分支或目标分支列表
 * @param {*} type origin | target
 * @param {*} repoId
 */
const getBranchList = async (type = 'origin', repoId = getRepoId()) => {
  loading.value = true;
  const params = {
    repoId,
    sort: type === 'origin' ? 'mr_source' : 'mr_target',
    per_page: 100 // TODO: 加下拉加载
  };
  const res = await getBranches(params);
  if (!res.error) {
    const repoData = res?.data?.data;
    const branchId = type === 'origin' ? 'originId' : 'targetId';
    const branchList = [];
    repoData.content.forEach((item) => {
      branchList.push({
        label: item.name,
        value: item.name
      });
    });
    if (type === 'origin') {
      originBranchList.value = branchList;
    } else {
      targetBranchList.value = branchList;
    }
    branchCompareData[branchId] =
      type === 'origin' ? originBranchList.value[0].value : targetBranchList.value[0].value;
  }
  loading.value = false;
};

const getTargetRepo = async (targetId) => {
  const params = { repoId: targetId };
  const res = await getRepo(params);
  if (!res.error) {
    const repoData = res?.data?.data;
    targetRepos.value.unshift({ ...repoData });
    targetRepoList.value.unshift({
      label: repoData.path_with_namespace,
      value: repoData.path_with_namespace
    });
    branchCompareData.targetRepoId = repoData.path_with_namespace;
    getBranchList('target', repoData.id);
  }
};

const getOriginRepo = async (repoId = getRepoId()) => {
  loading.value = true;
  const params = { repoId };
  const res = await getRepo(params);
  if (!res.error) {
    const repoData = res?.data?.data;
    targetRepos.value.unshift({ ...repoData });
    isFork.value = !!repoData.forked_from_project;
    if (isFork.value) {
      getTargetRepo(repoData.forked_from_project.id);
    } else {
      getBranchList('target', repoId);
    }
    getBranchList();
  }
};
getOriginRepo();

watch(
  () => branchCompareData.repoId,
  (val) => {
    getBranchList('origin', encodeURIComponent(val));
  }
);
watch(
  () => branchCompareData.targetRepoId,
  (val) => {
    getBranchList('target', encodeURIComponent(val));
  }
);

const toNext = () => {
  const { repoId, targetRepoId, originId, targetId } = branchCompareData;
  const originPath = `${repoId}${originId}`;
  const targetPath = `${targetRepoId}${targetId}`;
  if (!originId) return Message.warning('请选择源分支');
  if (!targetId) return Message.warning('请选择目标分支');
  if (originPath === targetPath) {
    return Message.warning('目标分支和源分支不能相同');
  }
  const selectTargetRepo = targetRepos.value.filter(
    (item) => item.path_with_namespace === targetRepoId
  );
  router.push({
    name: 'repoMergeCompare',
    query: {
      originRepo: repoId,
      targetRepo: targetRepoId,
      targetProjectId: selectTargetRepo[0].id,
      originBranch: originId,
      targetBranch: targetId
    }
  });
};
</script>

<style lang="scss" scoped>
.mr-title {
  margin: 24px 0 16px 0;
  font-size: var(--text-2xl);
  color: var(--color-G900);
  font-weight: 500;
  line-height: 32px;
}
</style>