页面显示
在这里插入图片描述
写在前面
改代码使用slot，接口返回值必须为title，key，children，不能使用API
在这里插入图片描述
这个会导致我们按钮的slot冲突
完整代码
<template>
<div class="department">
<a-card title="部门管理" :bordered="false">
<div>
<a-row class="departmentTitle">
<a-col :span="10">部门名称</a-col>
<a-col :span="10">部门负责人</a-col>
<a-col :span="4" style="text-align:center">操作</a-col>
</a-row>
</div>
<a-tree
ref="tree1"
:load-data="onLoadData"
:tree-data="treeData"
:defaultExpandAll="false"
:selectedKeys="selectedKeys"
blockNode
>
<template v-slot:title="nodeData">
<a-row>
<a-col :span="10">{{ nodeData.title }}</a-col>
<a-col :span="10">{{ nodeData.dataRef.owner }}</a-col>
<a-col :span="4">
<a-button-group style="float:right">
<a-button size="small" @click="addNode(nodeData)"
>新增下级</a-button
>
<a-button size="small" @click="editNode(nodeData)"
>修改</a-button
>
<a-popconfirm
title="确认删除该部门？"
ok-text="确认"
cancel-text="取消"
@confirm="deleteNode(nodeData)"
>
<a-button size="small">删除</a-button>
</a-popconfirm>
</a-button-group>
</a-col>
</a-row>
</template>
</a-tree>
<a-modal
v-model:visible="visible"
:title="modalTitle"
@ok="handleOk"
@cancel="resetForm"
okText="确认"
cancelText="取消"
:maskClosable="false"
:closable="false"
>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item ref="depName" label="部门名称" name="depName">
<a-input
v-model:value="formState.depName"
placeholder="请输入部门名称"
:disabled="formState.disabled"
/>
</a-form-item>
<a-form-item ref="depPerson" label="部门负责人" name="depPerson">
<a-input
v-model:value="formState.depPerson"
placeholder="请输入部门负责人"
:disabled="formState.disabled"
/>
</a-form-item>
<a-form-item ref="depDes" label="部门描述" name="depDes">
<a-textarea
v-model:value="formState.depDes"
placeholder="请输入部门描述"
:rows="4"
:disabled="formState.disabled"
/>
</a-form-item>
</a-form>
</a-modal>
</a-card>
</div>
</template>
<script>
import { message } from "ant-design-vue";
import {
defineComponent,
reactive,
ref,
toRefs,
toRaw,
getCurrentInstance,
onMounted,
} from "vue";
export default defineComponent({
setup() {
let { proxy } = getCurrentInstance();
const tree = reactive({
treeData: [],
});
const selectedKeys = ref();
const visible = ref(false);
const modalTitle = ref("新增部门");
const formRef = ref();
const formState = reactive({
depName: "",
depPerson: "",
depDes: "",
parentId: "",
id: "",
disabled: false,
});
const rules = {
depName: [
{
required: true,
message: "请输入部门名称",
trigger: "blur",
},
],
depPerson: [
{
required: true,
message: "请输入部门负责人",
trigger: "blur",
},
],
depDes: [
{
required: true,
message: "请输入部门描述",
trigger: "blur",
},
],
};
const onLoadData = (treeNode) => {
return new Promise((resolve) => {
proxy.axios
.get(`/apis/depts/${treeNode.dataRef.id}/subDepts`)
.then((res) => {
if (res.data.data == 0) {
resolve();
return;
}
treeNode.dataRef.children = treeNode.dataRef.children.concat(
res.data.data
);
tree.treeData = [...tree.treeData];
resolve();
})
.catch(() => {
message.error("查询失败");
});
});
};
const searchTree = (id) => {
proxy.axios
.get(`/apis/depts/${id}/subDepts`)
.then((res) => {
message.success("查询成功");
// console.log(res);
tree.treeData = tree.treeData.concat(res.data.data);
})
.catch(() => {
message.error("查询失败");
});
};
// 新增下级按钮
const addNode = (e) => {
formState.id = e.id;
visible.value = true;
modalTitle.value = "新增部门";
};
// 修改按钮
const editNode = (e) => {
console.log(e);
formState.depName = e.title;
formState.depPerson = e.owner;
formState.parentId = e.parentId;
formState.id = e.id;
formState.depDes = e.remark;
visible.value = true;
modalTitle.value = "修改部门";
};
// 删除按钮
const deleteNode = (e) => {
console.log(e);
proxy.axios
.delete("/apis/depts/" + e.id)
.then((res) => {
if (res.data.status == 1) {
let treeData = tree.treeData;
tree.treeData = deleteParentNode(treeData, e.key);
console.log(tree.treeData);
} else {
message.error("删除失败，请联系管理员");
}
})
.catch(() => {
message.error("删除失败，请联系管理员");
});
};
const has = (obj, key) => {
if (obj.key !== key) {
return obj;
}
};
const deleteParentNode = (data, key) => {
const ret = [];
data.forEach((ele) => {
if (has(ele, key)) {
if (ele.children) {
ele.children = deleteParentNode(ele.children, key);
}
ret.push(ele);
}
});
return ret;
};
const hasNode = (obj, id) => {
console.log(obj, id);
if (obj.id == id) {
return true;
} else {
return false;
}
};
const addNextNode = (data, id, addNodes) => {
console.log(data, id, addNodes);
const ret = [];
data.forEach((ele) => {
if (hasNode(ele, id)) {
if (ele.children.length > 0) {
ele.children.push(addNodes);
ele.children = addNextNode(ele.children, id);
}
ret.push(ele);
} else {
if (ele.children) {
ele.children = addNextNode(ele.children, id);
}
ret.push(ele);
}
});
return ret;
};
const hasUpdate = (obj, id, updateData) => {
console.log(obj, id);
if (obj.id !== id) {
return obj;
} else {
obj.name = updateData.name;
obj.owner = updateData.owner;
obj.remark = updateData.remark;
return obj;
}
};
const updateNode = (data, id, updateData) => {
const ret = [];
data.forEach((ele) => {
if (hasUpdate(ele, id, updateData)) {
if (ele.children) {
ele.children = updateNode(ele.children, id, updateData);
}
ret.push(ele);
}
});
return ret;
};
const handleOk = (e) => {
console.log(e);
formRef.value
.validate()
.then(() => {
console.log("values", formState, toRaw(formState), e);
if (modalTitle.value == "新增部门") {
//新增部门
proxy.axios
.post("/apis/depts", {
name: formState.depName,
owner: formState.depPerson,
parentId: formState.id,
remark: formState.depDes,
})
.then((res) => {
if (res.data.status == 0) {
message.error("该部门以重复，请修改");
} else {
tree.treeData = addNextNode(
tree.treeData,
formState.parentId,
res.data.data
);
}
})
.catch(() => {
message.error("新增失败请联系管理员");
})
.finally(() => {
resetForm();
visible.value = false;
});
} else {
//修改部门
proxy.axios
.patch(`/apis/depts/${formState.id}`, {
name: formState.depName,
owner: formState.depPerson,
parentId: formState.parentId,
remark: formState.depDes,
})
.then((res) => {
if (res.data.status == 1) {
tree.treeData = updateNode(tree.treeData, formState.id, {
name: formState.depName,
owner: formState.depPerson,
parentId: formState.parentId,
remark: formState.depDes,
id: formState.id,
});
} else {
message.error("修改失败请联系管理员");
}
})
.catch(() => {
message.error("修改失败请联系管理员");
})
.finally(() => {
resetForm();
visible.value = false;
});
}
})
.catch((error) => {
console.log("error", error);
});
};
const resetForm = () => {
formRef.value.resetFields();
};
onMounted(() => {
searchTree(0);
});
return {
...toRefs(tree),
selectedKeys,
addNode,
deleteNode,
editNode,
visible,
handleOk,
formRef,
labelCol: {
span: 5,
},
wrapperCol: {
span: 17,
},
other: "",
formState,
rules,
resetForm,
modalTitle,
onLoadData,
};
},
});
</script>
<style lang="scss" class="scoped">
.department {
.departmentTitle {
padding: 10px;
background: #eee;
}
}
</style>
