<template> <div class="ct"> <el-dialog title="请选择分组" :visible.sync="moveDialog" width="30%" :show-close="false" :close-on-click-modal="false" > <el-tree ref="tree" class="tree" show-checkbox :check-strictly="true" :data="treeData" node-key="id" @node-click="handleNodeClick" @check-change="checkChange" v-loading="orgLoading" element-loading-text="正在加载数据" > </el-tree> <span slot="footer" class="dialog-footer"> <el-button @click="handleCancel" size="small">取 消</el-button> <el-button type="primary" @click="handleFinish" size="small" >确 定</el-button > </span> </el-dialog> <div></div> </div> </template> <script> import { getOrgTree, moveMember } from "@/api/in/mail"; import { log } from "util"; export default { props: { moveDialog: { type: Boolean, default: false }, idList: { type: Array, default: () => [] } }, data() { return { treeData: [], orgLoading: false }; }, created() { console.log(this.idList,'idList') this.getList() }, methods: { handleCancel() { this.$emit("handleCancel"); }, handleFinish() { console.log(this.idList) let groupId = this.$refs.tree.getCheckedKeys()[0] let data = { departmentId: groupId, ids: this.idList+"" } moveMember(data).then(res=> { this.$emit("handleFinish", false); }) }, handleNodeClick(item, node, self) { //自己定义的editCheckId,防止单选出现混乱 this.editCheckId = item.id; this.$refs.tree.setCheckedKeys([item.id]); }, checkChange(item, node, self) { if (node == true) { this.editCheckId = item.id; this.$refs.tree.setCheckedKeys([item.id]); } else { if (this.editCheckId == item.id) { this.$refs.tree.setCheckedKeys([item.id]); } } }, getList() { this.orgLoading = true getOrgTree().then(res => { console.log(res.data.organizations) this.treeData = [res.data.organizations]; this.orgLoading = false }); } } }; </script> <style scoped> .tree >>> .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .tree >>> .el-checkbox .el-checkbox__inner { display: none; } .choose { padding: 16px; font-size: 16px; font-weight: bold; color: rgba(56, 56, 56, 1); box-sizing: border-box; } .title { display: flex; align-items: center; justify-content: space-between; /* border-bottom: 1px solid #f8f8f8; */ padding-bottom: 10px; } .transfer-footer { margin-left: 20px; padding: 6px 5px; } .ct >>> .el-dialog__header { border-bottom: 1px solid #f8f8f8; } .ct >>> .el-dialog__body { padding: 20px 40px; } .ct >>> .el-transfer-panel { width: 250px; } .circle { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 1px solid rgba(208, 2, 27, 1); position: relative; } .circle >>> .icon { width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .br { border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; padding: 24px 0; } </style>