效果图如下：
<!-- 添加项目的弹框 -->
<el-dialog v-model="addDlg" class="pro_dialog" title="添加项目" width="40%">
<el-form :model="addForm">
<el-form-item label="项目名"><el-input v-model="addForm.name" autocomplete="off" class="input-field"/></el-form-item>
<el-form-item label="部门">
<el-tree
ref="departmentTreeRef"
:data="departmentTree"
:props="departmentTreeProps"
show-checkbox
highlight-current
node-key="id"
v-model="addForm.org"
></el-tree>
</el-form-item>
<el-form-item label="负责人" >
<el-select v-model="addForm.leader" autocomplete="off" multiple filterable class="input-field">
<el-option
v-for="leader in filterLeaders"
:key="leader.id"
:label="leader.userName"
:value="leader.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addDlg = false" size="mini">取消</el-button>
<el-button type="primary" @click="addPro" size="mini">确定</el-button>
</span>
</template>
</el-dialog>
// 获取所有用户
async getLeaders() {
try {
const response = await this.$api.getUsers();
this.leaders = response.data.result.records;
} catch (error) {
console.error(error);
}},
// 获取所有机构
async getorgInfo() {
try {
const response = await this.$api.getOrgInfo();
if (response.data.code === "0"){
this.departmentTree = [response.data.result];
}
} catch (error) {
console.error(error);
}},
// 点击进入项目
clickView(pro) {
// 将选中的项目信息保存的vuex
this.selectPro(pro);
// 路由跳转
this.$router.push({ name: 'home' });
},
// 点击添加项目按钮
clickAdd() {
// 将添加表单置空
this.addForm = {
name: '',
leader: [],
org:[]
};
// 显示模态框
this.addDlg = true;
},
// 点击编辑项目按钮
clickEdit(item) {
this.updateForm = {
id:item.id,
name:item.name,
leader:item.leader.map(leader => leader.userId),
org:item.org.map(org => this.findOrgNodeById(this.departmentTree,org.orgId))
};
this.defaultCheckedKeys = this.updateForm.org.map(org => org.id);
// 保存默认值
const temp = [...this.defaultCheckedKeys];
this.updateDlg = true;
this.$nextTick(() => {
if (this.$refs.departmentTreeRef){
// 用$refs清空已勾选的，否则不生效，重新勾选，
this.$refs.departmentTreeRef.setCheckedKeys([]);
this.defaultCheckedKeys = temp;
}
})
},
// 点击删除按钮
clickDelete(id) {
ElMessageBox.confirm('确定要删除该项目吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.deletePro(id);
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消删除'
});
});
},
//在机构列表中根据id查找对应节点的label
findOrgNodeById(nodes, id) {
for (const node of nodes) {
if (node.id === id) {
return node;
}
// 递归查找子节点
if (node.childOrg && node.childOrg.length > 0) {
const foundNode = this.findOrgNodeById(node.childOrg, id);
if (foundNode) {
return foundNode;
}}}
return null;
},
// 添加项目
async addPro() {
// 获取选中的部门id
const selectedOrgIds = this.$refs.departmentTreeRef.getCheckedNodes().map(node => node.id);
//根据部门查找部门名称
const selectedOrgLabels = selectedOrgIds.map(orgId => {
const orgNode = this.findOrgNodeById(this.departmentTree, orgId);
return orgNode && orgNode.name ? orgNode.name : "";
});
//组装部门数据
const orgData = selectedOrgIds.map((id, index) => {
return { orgId: id, orgName: selectedOrgLabels[index] };
});
//组装请求数据
const data = {
name: this.addForm.name,
org:orgData,
// 根据id获取用户名
leader: this.addForm.leader.map(id => {
const leaderinfo = this.leaders.find(leader => leader.id==id);
return{
userId:id,
userName:leaderinfo.userName
}})};
const response = await this.$api.createProjects(data);
if (response.status === 201) {
this.$message({
message: '添加成功!',
type: 'success',
duration: 1000
});
// 刷新页面数据
this.getAllPro();
this.addDlg = false;
}},
接口返回的数据结构如下：
