commit
This commit is contained in:
zhutianqi
@@ -20,51 +20,67 @@
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tree
|
||||
v-if="open1 && isVisible2"
|
||||
node-key="id"
|
||||
style="height: 100%; overflow: auto;"
|
||||
class="filter-tree tree-line"
|
||||
icon-class="icon-tree"
|
||||
@check-change="checkChange"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
:default-checked-keys="nodeList"
|
||||
highlight-current
|
||||
check-strictly
|
||||
@check="drawerCheck"
|
||||
:expand-on-click-node="true"
|
||||
show-checkbox
|
||||
ref="tree"
|
||||
:load="loadNode"
|
||||
lazy>
|
||||
<div class="divTree">
|
||||
<el-tree
|
||||
v-if="open1 && isVisible2"
|
||||
node-key="id"
|
||||
style="height: 100%; overflow: auto;"
|
||||
class="filter-tree tree-line"
|
||||
icon-class="icon-tree"
|
||||
@check-change="checkChange"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
:default-checked-keys="nodeList"
|
||||
highlight-current
|
||||
check-strictly
|
||||
@check="drawerCheck"
|
||||
:expand-on-click-node="true"
|
||||
show-checkbox
|
||||
ref="tree"
|
||||
:load="loadNode"
|
||||
lazy>
|
||||
<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>
|
||||
<el-tree
|
||||
v-if="!open1 && isVisible2"
|
||||
node-key="id"
|
||||
style="height: 100%; overflow: auto;"
|
||||
class="filter-tree tree-line"
|
||||
icon-class="icon-tree"
|
||||
:data="treeData1"
|
||||
:props="defaultProps"
|
||||
@check-change="checkChange2"
|
||||
:default-checked-keys="nodeList"
|
||||
highlight-current
|
||||
check-strictly
|
||||
@check="drawerCheck"
|
||||
:expand-on-click-node="true"
|
||||
default-expand-all
|
||||
show-checkbox
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
<el-tree
|
||||
v-if="!open1 && isVisible2"
|
||||
node-key="id"
|
||||
style="height: 100%; overflow: auto;"
|
||||
class="filter-tree tree-line"
|
||||
icon-class="icon-tree"
|
||||
:data="treeData1"
|
||||
:props="defaultProps"
|
||||
@check-change="checkChange2"
|
||||
:default-checked-keys="nodeList"
|
||||
highlight-current
|
||||
check-strictly
|
||||
@check="drawerCheck"
|
||||
:expand-on-click-node="true"
|
||||
default-expand-all
|
||||
show-checkbox
|
||||
ref="tree">
|
||||
<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>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="divDel">
|
||||
<div class="divDel_title">已选中人员</div>
|
||||
<div class="divDel_box">
|
||||
<el-tag
|
||||
v-for="tag in delList"
|
||||
:key="tag.id"
|
||||
size="mini"
|
||||
@close="handleClose(tag)"
|
||||
closable>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
<el-tag v-show="delList.length > 0" type="danger" closable size="mini" @close="handleCloseAll()">全部删除</el-tag>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -108,6 +124,7 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
delList: [],
|
||||
roleList: [],
|
||||
isVisible2: false,
|
||||
filterText: '',
|
||||
@@ -128,6 +145,36 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose (tag) {
|
||||
for (let a = 0; a < this.delList.length; a++) {
|
||||
if (tag.id === this.delList[a].id) {
|
||||
this.delList.splice(a, 1)
|
||||
}
|
||||
}
|
||||
for (let b = 0; b < this.nodeList.length; b++) {
|
||||
if (tag.id === this.nodeList[b]) {
|
||||
this.nodeList.splice(b, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
handleCloseAll () {
|
||||
this.$msgbox({
|
||||
title: '提示',
|
||||
message: '是否删除当前选中人员',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
}).then(() => {
|
||||
this.delList = []
|
||||
this.nodeList = []
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '取消删除'
|
||||
});
|
||||
}
|
||||
)
|
||||
},
|
||||
changeInput:debounce(function (val) {
|
||||
if (val.length) {
|
||||
this.open1 = false
|
||||
@@ -219,14 +266,6 @@
|
||||
} else if (getlist.length === 1) {
|
||||
this.roleList = [data]
|
||||
}
|
||||
// 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())
|
||||
}
|
||||
@@ -256,6 +295,30 @@
|
||||
watch: {
|
||||
isVisible (val) {
|
||||
this.isVisible2 = val
|
||||
if (val) {
|
||||
if (this.nodeList.length > 0 && this.nodeList[0].length !== 0) {
|
||||
let ids = ''
|
||||
this.nodeList.forEach(item => {
|
||||
if (ids.length > 0) {
|
||||
ids += ','
|
||||
ids += item
|
||||
} else {
|
||||
ids = item
|
||||
}
|
||||
})
|
||||
this.$http.get('SarInstitution/institution/getNextById', {
|
||||
ids: ids
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.delList = res
|
||||
})
|
||||
} else {
|
||||
this.delList = []
|
||||
}
|
||||
} else {
|
||||
this.delList = []
|
||||
}
|
||||
},
|
||||
isVisible2 (val) {
|
||||
this.$emit('update:isVisible', val)
|
||||
@@ -268,7 +331,27 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .icon-tree {
|
||||
.divTree {
|
||||
overflow: auto;
|
||||
height: calc(~'100% - 300px');
|
||||
}
|
||||
.divDel {
|
||||
border-top: 1px solid #000;
|
||||
height: 300px;
|
||||
.divDel_title {
|
||||
margin: 10px;
|
||||
}
|
||||
.divDel_box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
margin: 10px;
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .icon-tree {
|
||||
margin: 0 5px 0 10px;
|
||||
position: relative;
|
||||
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||||
|
||||
Reference in New Issue
Block a user