td_official/src/views/project/projectRelevancy/component/ShuttleFrame.vue

<template>
  <div>
    <div>
      <el-transfer v-model="selectedProjects" :data="allProjects" filterable :titles="['项目列表', '已关联项目']" @change="handleTransferChange" />
    </div>
    <div style="text-align: right; margin-top: 20px">
      <el-button type="primary" @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, watch } from 'vue';
import { listProject } from '@/api/project/project';
import { listUserProjects, addNewProjectRelevancy, removeNewProjectRelevancy } from '@/api/project/projectRelevancy';

// **从父组件接收 `userId`**
const props = defineProps<{ userId: number }>();

// **所有项目列表**
const allProjects = ref<{ key: number; label: string }[]>([]);

// **已关联的项目 ID 列表**
const selectedProjects = ref<number[]>([]);

// **获取所有项目列表**
const getProjectList = async () => {
  try {
    const res = await listProject();
    allProjects.value = res.data.records.map((project) => ({
      key: project.id,
      label: project.projectName
    }));
  } catch (error) {
    console.error('获取项目列表失败:', error);
  }
};
const getUserProjects = async () => {
  if (!props.userId) return;
  try {
    const res = await listUserProjects({ userId: props.userId });

    // 修改这里，使用 res.records 而不是 res.rows
    selectedProjects.value = Array.isArray(res.data.records)
      ? res.data.records.map((item) => item.projectId)
      : [];

    console.log('已加载用户关联项目:', selectedProjects.value);
  } catch (error) {
    console.error('获取用户关联的项目失败:', error);
    selectedProjects.value = []; // 请求失败时清空列表
  }
};

// **监听 `userId` 变化，重新加载关联数据**
watch(
  () => props.userId,
  async (newUserId) => {
    if (newUserId) {
      await getUserProjects();
    }
  },
  { immediate: true }
);

// **处理穿梭框变更**
const handleTransferChange = async (newValue: number[], direction: 'left' | 'right', movedKeys: number[]) => {
  try {
    if (direction === 'right') {
      // **添加关联**
      await addNewProjectRelevancy({
        userId: props.userId,
        projectIdList: movedKeys
      });
    } else {
      // **移除关联**
      await removeNewProjectRelevancy({
        userId: props.userId,
        projectIdList: movedKeys
      });
    }
  } catch (error) {
    console.error('更新项目关联失败:', error);
  }
};

// **初始化数据**
onMounted(async () => {
  await getProjectList();
});
</script>