IntelliClass_FE/pages/course/[id]/team.vue

<script lang="ts" setup>
import { toast } from "vue-sonner";
import { userSearch } from "~/api";
import {
  addTeacherToCourse,
  deleteTeacherTeamRecord,
  getCourseDetail,
  getTeacherTeamByCourse,
} from "~/api/course";
import type { FetchError } from "~/types";

definePageMeta({
  requiresAuth: true,
});

const {
  params: { id: courseId },
} = useRoute();

const loginState = useLoginState();
const course = await getCourseDetail(courseId as string);

const { data: teacherTeam, refresh: refreshTeacherTeam } = useAsyncData(() =>
  getTeacherTeamByCourse(parseInt(courseId as string))
);

const searchKeyword = ref("");

const {
  data: searchResults,
  refresh: refreshSearch,
  clear: clearSearch,
} = useAsyncData(
  () =>
    userSearch({
      searchType: "teacher",
      keyword: searchKeyword.value,
    }),
  {
    immediate: false,
  }
);

// watch searchKeyword and refresh search results, with debounce
const triggerSearch = useDebounceFn(() => {
  if (searchKeyword.value.length > 0) {
    refreshSearch();
  } else {
    clearSearch();
  }
}, 500);

watch(searchKeyword, (newValue) => {
  if (newValue.length > 0) {
    triggerSearch();
  }
});

const isInTeam = (userId: number) => {
  return teacherTeam?.value?.data?.some((item) => item.teacherId === userId);
};

const onAddTeacherToCourse = (teacherId: number) => {
  toast.promise(
    addTeacherToCourse({
      courseId: parseInt(courseId as string),
      teacherId,
    }),
    {
      loading: "正在添加教师...",
      success: () => {
        refreshTeacherTeam();
        return "添加教师成功";
      },
      error: (error: FetchError) => {
        if (error.statusCode === 409) {
          return "该教师已在团队中";
        }
        return `添加教师失败：${error.message}`;
      },
    }
  );
};

const onDeleteTeacher = (recordId: number) => {
  toast.promise(deleteTeacherTeamRecord(recordId), {
    loading: "正在移出教师...",
    success: () => {
      refreshTeacherTeam();
      return "移出教师成功";
    },
    error: (error: FetchError) => {
      return `移出教师失败：${error.message}`;
    },
  });
};
</script>

<template>
  <div class="flex flex-col gap-4 px-4 py-2">
    <div class="flex justify-between items-start">
      <h1 class="text-xl font-medium">
        教师团队管理
        <span class="block text-sm text-muted-foreground">
          课程负责人：{{ course.data.teacherName || "未知" }}
        </span>
      </h1>
      <div class="flex items-center gap-4">
        <Popover>
          <PopoverTrigger as-child>
            <Button
              variant="secondary"
              size="sm"
              class="flex items-center gap-1"
            >
              <Icon name="tabler:plus" size="16px" />
              <span>添加教师</span>
            </Button>
          </PopoverTrigger>
          <PopoverContent class="w-96" :align="'end'">
            <div class="flex flex-col gap-4">
              <FormField v-slot="{ componentField }" name="keyword">
                <FormItem>
                  <FormLabel>搜索教师</FormLabel>
                  <FormControl>
                    <Input
                      v-bind="componentField"
                      v-model="searchKeyword"
                      type="text"
                      placeholder="搜索工号/姓名/手机号"
                    />
                  </FormControl>
                  <FormDescription>
                    <p class="text-xs">
                      搜索教师工号/姓名/手机号，然后添加到团队中
                    </p>
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              </FormField>
              <hr />
              <div class="flex flex-col gap-2">
                <p class="text-sm text-muted-foreground">搜索结果</p>
                <div
                  v-if="searchResults?.data && searchResults.data.length > 0"
                  class="flex flex-col gap-2"
                >
                  <div
                    v-for="user in searchResults.data"
                    :key="user.userId"
                    class="flex justify-between items-center gap-2"
                  >
                    <div class="flex items-center gap-4">
                      <Avatar class="w-12 h-12 text-base">
                        <AvatarImage
                          :src="user.avatar || ''"
                          :alt="user.userName"
                        />
                        <AvatarFallback class="rounded-lg">
                          {{ user.userName.slice(0, 2).toUpperCase() }}
                        </AvatarFallback>
                      </Avatar>

                      <div class="flex flex-col gap-1">
                        <h1
                          class="text-sm font-medium text-ellipsis line-clamp-1"
                        >
                          {{ user.userName || "未知教师" }}
                        </h1>
                        <p class="text-xs text-muted-foreground/80">
                          工号：{{ user.employeeId || "未知" }}
                        </p>
                        <p class="text-xs text-muted-foreground/80">
                          {{ user.collegeName || "未知学院" }}
                        </p>
                      </div>
                    </div>
                    <Button
                      variant="secondary"
                      size="sm"
                      class="flex items-center gap-1"
                      :disabled="isInTeam(user.id!)"
                      @click="onAddTeacherToCourse(user.id!)"
                    >
                      <Icon
                        v-if="!isInTeam(user.id!)"
                        name="tabler:plus"
                        size="16px"
                      />
                      <span>
                        {{ isInTeam(user.id!) ? "已在团队" : "添加" }}
                      </span>
                    </Button>
                  </div>
                </div>
                <EmptyScreen
                  v-else
                  title="没有搜索结果"
                  description="没有找到符合条件的教师"
                  icon="fluent-color:people-list-24"
                />
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </div>
    </div>

    <div
      v-if="teacherTeam?.data && teacherTeam.data.length > 0"
      class="grid gap-6 grid-cols-2 sm:grid-cols-3 2xl:grid-cols-5"
    >
      <CourseTeamMember
        v-for="member in teacherTeam.data"
        :key="member.teacherId"
        :is-current-user="loginState.user?.userId === member.teacherId"
        :member
        @delete="onDeleteTeacher"
      />
    </div>
    <EmptyScreen
      v-else
      title="暂无团队成员"
      description="请添加教师作为团队成员"
      icon="fluent-color:people-list-24"
    />
  </div>
</template>

<style scoped></style>