1.效果
组织架构图
编辑
新增
2.安装
npm i vue2-org-tree
3.引用
在mian.js中
import Vue2OrgTree from 'vue2-org-tree';
import "vue2-org-tree/dist/style.css";
Vue.use(Vue2OrgTree)
4.使用
template
<template>
<div class="structure">
<vue2-org-tree
:data="dataTree"
:horizontal="horizontal"
:render-content="renderContent"
:collapsable="collapsable"
/>
<!-- 新增、编辑弹窗 -->
<el-dialog
center
:title="textMap[dialogStatus] + '组织'"
:visible.sync="dialogFormVisible"
>
<!-- 修改label样式 -->
<el-form
ref="dataForm"
:model="dataForm"
label-position="right"
label-width="90px"
>
<el-form-item
prop="parentId"
:label="dialogStatus === 'create' ? '当前组织' : '上级组织'"
>
<treeselect
v-model="dataForm.parentId"
class="treeselect_main"
:options="structureOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择"
:clearable="false"
/>
</el-form-item>
<el-form-item prop="label" label="组织名称">
<el-input
v-model.trim="dataForm.label"
placeholder="请输入组织名称"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
@click="dialogStatus === 'create' ? createData() : updateData()"
>
确认
</el-button>
<el-button @click="dialogFormVisible = false"> 取消 </el-button>
</div>
</el-dialog>
</div>
</template>
script
<script>
import Treeselect from "@riophae/vue-treeselect" // 引入树形下拉框组件
import "@riophae/vue-treeselect/dist/vue-treeselect.css" // 引入树形下拉框样式
export default {
components: { Treeselect },
data() {
return {
dataTree: {
id: 1,
label: "总支部委员会",
parentId: 0,
children: [
{
id: 2,
label: "第一支部委员会",
parentId: 1,
children: null,
},
{
id: 3,
label: "第二支部委员会",
parentId: 1,
children: null,
},
{
id: 4,
label: "支部委员会",
parentId: 1,
children: null,
},
],
}, //存储组织数据
horizontal: false, //是否水平布局
collapsable: false, //是否可折叠
expandAll: false, //是否展开全部
dialogFormVisible: false, // 控制新、增编辑弹窗是否打开
dialogStatus: "", // 判断打开的是新增活编辑弹窗
// 存储弹窗标题
textMap: {
update: "编辑",
create: "新增",
},
structureForm: {
id: undefined,
parentId: "",
label: "",
}, //表单内容
// 组件分级下拉列表
structureOptions: [],
}
},
methods: {
/**
* @description: 转换数据结构
*/
normalizer(node) {
// 判断字节点为空时，删除该字节点，解决报错
if (
node.children == null ||
(node.children === "null" && !node.children.length)
) {
delete node.children
}
return {
id: node.id,
label: node.label,
children: node.children,
}
},
/**
* @description: 渲染节点内容
*/
renderContent(h, data) {
return (
<span style="width:100%;height:100%;display:block;border-radius:3px;cursor: pointer">
<el-popover placement="bottom" width="250" trigger="click">
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="primary"
onClick={() => this.updateStructure(data)}
>
编辑
</el-button>
<el-button
size="mini"
type="primary"
onClick={() => this.addStructure(data)}
>
新增子节点
</el-button>
<el-button
type="primary"
size="mini"
onClick={() => this.deleteStructure(data)}
>
删除
</el-button>
</div>
<div slot="reference">
<div></div>
<dd style="text-align: center;">{data.label}</dd>
</div>
</el-popover>
</span>
)
},
/**
* @description:通过接口架构数据
*/
async getStructureList() {
// const {
// data: { data },
// } = await getStructureList()
// this.dataTree = data[0]
this.structureOptions = [this.dataTree]
},
/**
* @description:新增子节点
*/
addStructure(data) {
// 清除表单
this.resetstructureForm()
// 设备弹窗为新增弹窗
this.dialogStatus = "create"
// 打开弹窗
this.dialogFormVisible = true
this.structureForm.parentId = data.id
// 清除上一次的表单验证
this.$nextTick(() => {
this.$refs["structureForm"].clearValidate()
})
},
/**
* @description: 提交新增表单
*/
createStructureData() {
// 表单验证
this.$refs["structureForm"].validate((valid) => {
if (valid) {
// 通过接口新增
addStructure(this.structureForm).then((res) => {
if (res.data.status === 200) {
this.dialogFormVisible = false
this.$notify({
title: "成功",
message: "创建成功",
type: "success",
duration: 2000,
})
this.getStructureList()
} else {
this.$notify({
title: "失败",
message: res.data.message,
type: "error",
duration: 2000,
})
}
})
}
})
},
/**
* @description: 修改
*/
updateStructure(row) {
// 表单赋值
this.structureForm = Object.assign({}, row)
// 设备弹窗为编辑
this.dialogStatus = "update"
// 打开弹窗
this.dialogFormVisible = true
// 清除上一次的表单验证
this.$nextTick(() => {
this.$refs["structureForm"].clearValidate()
})
},
/**
* @description:提交编辑表单
*/
updateStructureData() {
// 表单验证
this.$refs["structureForm"].validate((valid) => {
if (valid) {
// 通过修改接口进行数据修改
updateStructure(this.structureForm).then((res) => {
if (res.data.status === 200) {
this.dialogFormVisible = false
this.$notify({
title: "成功",
message: "更新成功",
type: "success",
duration: 2000,
})
this.getStructureList()
} else {
this.$notify({
title: "失败",
message: res.data.message,
type: "error",
duration: 2000,
})
}
})
}
})
},
/**
* @description:重置表单
*/
resetstructureForm() {
this.structureForm = {
id: undefined,
parentId: "",
label: "",
}
},
/**
* @description: 删除
*/
deleteStructure(row) {
this.$confirm("此操作将永久删除该信息, 是否继续?", "操作提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(() => {
// 通过删除接口进行删除
deleteStructure({ id: row.id }).then(() => {
this.$notify({
title: "成功",
message: "删除成功",
type: "success",
duration: 2000,
})
this.getStructureList()
})
})
.catch(() => {
this.$message({
type: "info",
message: "取消删除",
})
})
},
},
mounted() {
this.getStructureList()
},
}
</script>
