添加增删改查

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

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