搜索结果列表页面开发

src/views/Mobile/Repo/Merge/Create/index.vue

@@ -0,0 +1,178 @@
+<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>