将国内海外编辑页面改为树形选择
This commit is contained in:
shenyanpei
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="roleTree">
|
||||
<el-drawer
|
||||
:title="isTitle"
|
||||
:visible.sync="isVisible2"
|
||||
:wrapperClosable="false"
|
||||
@close="handleTreeDrawerCancel"
|
||||
size="400px">
|
||||
<el-form
|
||||
ref="attributeEO"
|
||||
class="label-input-form"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item class="form-item-disabled" style="margin: 10px;">
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
placeholder="请输入部门"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer-content">
|
||||
<el-tree
|
||||
class="filter-tree tree-line"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
:current-node-key="nodeKeyId"
|
||||
node-key="id"
|
||||
:filter-node-method="filterNode"
|
||||
highlight-current
|
||||
:auto-expand-parent="true"
|
||||
show-checkbox
|
||||
ref="tree"
|
||||
:load="loadNode"
|
||||
@check="drawerCheck"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
||||
<span> {{ node.label }} </span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div id="roleFormButton" class="demo-drawer-footer">
|
||||
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">
|
||||
确定
|
||||
</el-button>
|
||||
|
||||
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleTreeDrawerCancel">取消
|
||||
</el-button>
|
||||
</div>
|
||||
<loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MechanismTree",
|
||||
props: {
|
||||
checkBox: { // 单选/多选
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isTitle: { // 标题
|
||||
type: String
|
||||
},
|
||||
isVisible: { // drawer开关
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
nodeList: { // 回显
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roleList: [],
|
||||
nodeKeyId: '',
|
||||
isVisible2: false,
|
||||
filterText: '',
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
isLeaf: (data, node) => {
|
||||
if (!node.disabled) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
treeData1: [],
|
||||
treeData: [],
|
||||
open1: true,
|
||||
treeLoading: false,
|
||||
roleRow: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
treeClass() {
|
||||
|
||||
},
|
||||
handleTreeDrawerCancel() {
|
||||
this.filterText = ''
|
||||
this.isVisible2 = false
|
||||
},
|
||||
saveUserInfo() {
|
||||
this.isVisible2 = false
|
||||
this.$emit('checkedRole', this.roleList)
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve(this.treeData);
|
||||
}
|
||||
},
|
||||
drawerCheck(data) {
|
||||
if (this.checkBox) {
|
||||
// 单选判断
|
||||
var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
|
||||
if (getlist.length == 1) {
|
||||
this.roleRow = getlist[0]
|
||||
} else {
|
||||
this.$refs.tree.setCheckedKeys([data.id]);
|
||||
this.roleRow = this.$refs.tree.getCheckedNodes()[0]
|
||||
}
|
||||
this.roleList = [this.roleRow]
|
||||
} else {
|
||||
this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
|
||||
}
|
||||
},
|
||||
getTree() {
|
||||
this.$http.get('SarInstitution/institution', {}, {
|
||||
_this: this,
|
||||
loading: 'treeLoading'
|
||||
}, res => {
|
||||
this.treeData = res.data
|
||||
console.log(this.treeData);
|
||||
this.nodeKeyId = this.treeData[0].id
|
||||
this.id = res.data[0].id
|
||||
}, e => {
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isVisible(val) {
|
||||
this.isVisible2 = val
|
||||
},
|
||||
isVisible2(val) {
|
||||
this.$emit('update:isVisible', val)
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTree()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .el-tree-node__content {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
/deep/ .is-leaf {
|
||||
background-image: none;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .is-leaf-none {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/personnel.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .is-show {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/mechanism.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .tree-line {
|
||||
min-height: calc(100vh - 170px);
|
||||
.el-tree-node {
|
||||
position: relative;
|
||||
padding-left: 0px; // 缩进量
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.el-tree-node__children {
|
||||
padding-left: 16px; // 缩进量
|
||||
}
|
||||
|
||||
// 竖线
|
||||
.el-tree-node::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -26px;
|
||||
border-left: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 当前层最后一个节点的竖线高度固定
|
||||
.el-tree-node:last-child::before {
|
||||
height: 38px; // 可以自己调节到合适数值
|
||||
}
|
||||
|
||||
// 横线
|
||||
.el-tree-node::after {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 12px;
|
||||
border-width: 1px;
|
||||
border-top: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||||
& > .el-tree-node::after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
& > .el-tree-node::before {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// 展开关闭的icon
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
// 叶子节点（无子节点）
|
||||
&.is-leaf {
|
||||
color: transparent;
|
||||
// display: none; // 也可以去掉
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user