89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
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.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.rows` 是数组**
|
||
|
|
selectedProjects.value = Array.isArray(res.rows) ? res.rows.map((item) => item.projectId) : [];
|
||
|
|
} 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>
|