commit
This commit is contained in:
zhutianqi
@@ -20,51 +20,67 @@
|
|||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-tree
|
<div class="divTree">
|
||||||
v-if="open1 && isVisible2"
|
<el-tree
|
||||||
node-key="id"
|
v-if="open1 && isVisible2"
|
||||||
style="height: 100%; overflow: auto;"
|
node-key="id"
|
||||||
class="filter-tree tree-line"
|
style="height: 100%; overflow: auto;"
|
||||||
icon-class="icon-tree"
|
class="filter-tree tree-line"
|
||||||
@check-change="checkChange"
|
icon-class="icon-tree"
|
||||||
:data="treeData"
|
@check-change="checkChange"
|
||||||
:props="defaultProps"
|
:data="treeData"
|
||||||
:default-checked-keys="nodeList"
|
:props="defaultProps"
|
||||||
highlight-current
|
:default-checked-keys="nodeList"
|
||||||
check-strictly
|
highlight-current
|
||||||
@check="drawerCheck"
|
check-strictly
|
||||||
:expand-on-click-node="true"
|
@check="drawerCheck"
|
||||||
show-checkbox
|
:expand-on-click-node="true"
|
||||||
ref="tree"
|
show-checkbox
|
||||||
:load="loadNode"
|
ref="tree"
|
||||||
lazy>
|
:load="loadNode"
|
||||||
|
lazy>
|
||||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
||||||
<span> {{ node.label }} </span>
|
<span> {{ node.label }} </span>
|
||||||
</span>
|
</span>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
<el-tree
|
<el-tree
|
||||||
v-if="!open1 && isVisible2"
|
v-if="!open1 && isVisible2"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
style="height: 100%; overflow: auto;"
|
style="height: 100%; overflow: auto;"
|
||||||
class="filter-tree tree-line"
|
class="filter-tree tree-line"
|
||||||
icon-class="icon-tree"
|
icon-class="icon-tree"
|
||||||
:data="treeData1"
|
:data="treeData1"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
@check-change="checkChange2"
|
@check-change="checkChange2"
|
||||||
:default-checked-keys="nodeList"
|
:default-checked-keys="nodeList"
|
||||||
highlight-current
|
highlight-current
|
||||||
check-strictly
|
check-strictly
|
||||||
@check="drawerCheck"
|
@check="drawerCheck"
|
||||||
:expand-on-click-node="true"
|
:expand-on-click-node="true"
|
||||||
default-expand-all
|
default-expand-all
|
||||||
show-checkbox
|
show-checkbox
|
||||||
ref="tree">
|
ref="tree">
|
||||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
||||||
<span> {{ node.label }} </span>
|
<span> {{ node.label }} </span>
|
||||||
</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">
|
<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-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
|
||||||
|
|
||||||
@@ -108,6 +124,7 @@
|
|||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
delList: [],
|
||||||
roleList: [],
|
roleList: [],
|
||||||
isVisible2: false,
|
isVisible2: false,
|
||||||
filterText: '',
|
filterText: '',
|
||||||
@@ -128,6 +145,36 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
changeInput:debounce(function (val) {
|
||||||
if (val.length) {
|
if (val.length) {
|
||||||
this.open1 = false
|
this.open1 = false
|
||||||
@@ -219,14 +266,6 @@
|
|||||||
} else if (getlist.length === 1) {
|
} else if (getlist.length === 1) {
|
||||||
this.roleList = [data]
|
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 { // 多选
|
} else { // 多选
|
||||||
this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
|
this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
|
||||||
}
|
}
|
||||||
@@ -256,6 +295,30 @@
|
|||||||
watch: {
|
watch: {
|
||||||
isVisible (val) {
|
isVisible (val) {
|
||||||
this.isVisible2 = 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) {
|
isVisible2 (val) {
|
||||||
this.$emit('update:isVisible', val)
|
this.$emit('update:isVisible', val)
|
||||||
@@ -268,7 +331,27 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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;
|
margin: 0 5px 0 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||||||
|
|||||||
Reference in New Issue
Block a user