|
|
|
|
@ -19,10 +19,30 @@
|
|
|
|
|
<i class="el-icon-search"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 部门树 -->
|
|
|
|
|
<div class="section_tree">
|
|
|
|
|
<el-tree
|
|
|
|
|
ref="company_tree"
|
|
|
|
|
:data="tree_data"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
show-checkbox
|
|
|
|
|
node-key="id"
|
|
|
|
|
:default-expand-all="defaultExpandAll"
|
|
|
|
|
@check="handle_check"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
slot-scope="{ node }"
|
|
|
|
|
:title="node.label"
|
|
|
|
|
class="el-tree-node__label node-label"
|
|
|
|
|
>
|
|
|
|
|
{{ node.label }}
|
|
|
|
|
</span>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form_btn" slot="footer">
|
|
|
|
|
<el-button @click="save_delete">取 消</el-button>
|
|
|
|
|
<el-button @click="close">确 定</el-button>
|
|
|
|
|
<el-button @click="close">取 消</el-button>
|
|
|
|
|
<el-button @click="enter">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
@ -34,21 +54,38 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
visible: false,
|
|
|
|
|
section_search: "",
|
|
|
|
|
tree_data: [],
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: "children",
|
|
|
|
|
label: "name",
|
|
|
|
|
},
|
|
|
|
|
defaultExpandAll: true, // 控制公司树默认展开
|
|
|
|
|
company_list: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
open() {
|
|
|
|
|
this.visible = true;
|
|
|
|
|
this.handle_click();
|
|
|
|
|
},
|
|
|
|
|
handle_click() {
|
|
|
|
|
let param = {
|
|
|
|
|
deptName: this.section_search,
|
|
|
|
|
};
|
|
|
|
|
get_backlog_company_tree(param).then(res=>{
|
|
|
|
|
console.log('res_ppp',res);
|
|
|
|
|
get_backlog_company_tree(param).then((res) => {
|
|
|
|
|
this.tree_data = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
save_delete() {},
|
|
|
|
|
handle_check(data, checkedData) {
|
|
|
|
|
console.log("data", data);
|
|
|
|
|
console.log("checkedData", checkedData);
|
|
|
|
|
this.company_list = checkedData.checkedNodes // 获取选中公司的数组
|
|
|
|
|
},
|
|
|
|
|
// 确定关闭弹窗
|
|
|
|
|
enter() {
|
|
|
|
|
this.$emit('push_data',this.company_list)
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
close() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
@ -130,6 +167,26 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.section_tree {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
width: 550px;
|
|
|
|
|
// border: 0.1px solid #5b748c;
|
|
|
|
|
height: 49vh;
|
|
|
|
|
// overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
// .section_tree::-webkit-scrollbar {
|
|
|
|
|
// display: none;
|
|
|
|
|
// width: 6px;
|
|
|
|
|
// background-color: #5e666a;
|
|
|
|
|
// border-radius: 4px;
|
|
|
|
|
// }
|
|
|
|
|
// .section_tree::-webkit-scrollbar-thumb {
|
|
|
|
|
// display: none;
|
|
|
|
|
// width: 5px;
|
|
|
|
|
// background-color: #3c4b4a;
|
|
|
|
|
// border-radius: 4px;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 120px;
|
|
|
|
|
@ -144,5 +201,86 @@ export default {
|
|
|
|
|
background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
.el-tree {
|
|
|
|
|
/* 树形数据过长添加滚动条 */
|
|
|
|
|
height: 49vh;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
// box-shadow: 5px 5px 10px #126a58;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
// background: #293738;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0.1px solid #485f6c;
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.el-tree-node__label.node-label {
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
/* 去掉树形数据前面的三角形 */
|
|
|
|
|
.el-icon-caret-right:before {
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
.node-label {
|
|
|
|
|
/* 树形数据横向过长添加展开 */
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
/* hover节点时的背景颜色 */
|
|
|
|
|
.el-tree-node__content:hover {
|
|
|
|
|
background: #495461;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
/* 节点选中的背景颜色 */
|
|
|
|
|
.el-tree-node:focus > .el-tree-node__content {
|
|
|
|
|
background: #495461;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
// 没有展开且有子节点
|
|
|
|
|
.el-tree.el-icon-caret-right:before {
|
|
|
|
|
background: url("~@/assets/companyFile/add.png") no-repeat;
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
width: 23px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
font-size: 23px;
|
|
|
|
|
background-size: 23px;
|
|
|
|
|
}
|
|
|
|
|
// 已经展开且有子节点
|
|
|
|
|
.el-tree.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
|
|
|
|
|
background: url("~@/assets/companyFile/add.png") no-repeat;
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
width: 23px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
font-size: 23px;
|
|
|
|
|
background-size: 23px;
|
|
|
|
|
}
|
|
|
|
|
// 没有子节点 minus
|
|
|
|
|
.el-tree.el-tree-node__expand-icon.is-leaf::before {
|
|
|
|
|
background: url("~@/assets/companyFile/minus.png") no-repeat;
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
width: 23px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
font-size: 23px;
|
|
|
|
|
background-size: 23px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-tree::-webkit-scrollbar {
|
|
|
|
|
width: 9px;
|
|
|
|
|
background-color: #5e666a;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.el-tree::-webkit-scrollbar-thumb {
|
|
|
|
|
width: 8px;
|
|
|
|
|
background-color: #3c4b4a;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lukeyan
1 year ago