Vue 项目中实现员工移入其他项目功能

{ "title": "Vue 项目中实现员工移入其他项目功能", "description": "本文章详细介绍了如何在 Vue 项目中实现员工移入其他项目的功能，包括前端代码、后端接口设计、以及数据交互流程。", "keywords": "Vue, 项目管理, 员工移入, 后端接口, 数据交互, 项目树结构, N-Tree 组件, N-Button 组件", "content": "<n-button type="warning" @click="handleOtherTeam" size="small" v-if="props.isteam">移入到其他作业队<n-button type="warning" @click="handleOtherProject" size="small" v-else>移入到其他项目 const props = defineProps({ projectId: { type: String, default: null, }, OwnChange: { type: Boolean, }, isteam: { type: Boolean, default: false, }, });

//移入到其他项目 const showOtherProject = ref(false); const other = reactive({ data1: { projectId: '', teamId: '', }, data2: { projectId: [{ required: computed(() => props.isteam == false), message: '请选择项目' }], teamId: [{ required: computed(() => props.isteam == true), message: '请选择作业队' }], }, }); const OtherProjectOptions = ref([]); const otherArr = ref([]); const OtherProjectRef = ref(); async function handleOtherProject() { const res = await getProjectTree(); const options = res.map((e) => { const arr = [ { id: e.id, projectName: '项目部', count: e.count, }, ]; e.children = arr.concat(e.items); let counts = 0; e.children = e.children.map((ele) => { counts += ele.count; ele.nameAndCount = ele.projectName + （${ele.count} 人）; return ele; }); e.nameAndCount = e.projectName + （共 ${counts} 人）; return e; }); OtherProjectOptions.value = options.map((e) => { return { label: e.nameAndCount, value: e.id, }; });

otherArr.value = projectRef.value.xGrid .getCheckboxReserveRecords() .concat(projectRef.value.xGrid.getCheckboxRecords()); if (otherArr.value.length == 0) { message.warning('至少勾选一名员工！'); } else { showOtherProject.value = true; } } function confirmOtherProject() { OtherProjectRef.value.validate(async (errors) => { if (!errors) { await editProjectPositions({ ids: otherArr.value.map((e) => e.id), projectId: props.isteam ? other.data1.teamId : other.data1.projectId, }); projectRef.value.reloadData(); showOtherProject.value = false; other.data1.projectId = ''; other.data1.teamId = ''; message.success('移入成功！'); } else { message.error('请填写完整信息!'); } }); }

// 修改后的代码 <n-tree :data="treeData" v-model="selectedNode" v-if="showTree" />

// 移入到其他项目 const showTree = ref(false); const treeData = ref([]); const selectedNode = ref(null);

async function handleOtherProject() { const res = await getProjectTree(); // 获取完整的后端接口树结构数据，并赋值给treeData treeData.value = res; showTree.value = true; }

function confirmOtherProject() { if (selectedNode.value) { // 根据selectedNode的值进行相应的操作，例如移入到选中的项目 // ... // 移入成功后，关闭完整的后端接口树结构组件 showTree.value = false; } else { message.error('请选择项目!'); } }