<template>
|
<div>
|
<el-input
|
v-model="searchInput"
|
placeholder="搜索部门名称"
|
size="small"
|
suffix-icon="el-icon-search"
|
@input="inputchange"/>
|
<div
|
v-loading="loading"
|
class="search-list">
|
<el-breadcrumb
|
style="padding: 5px 0;"
|
separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item
|
v-for="(item, index) in breadcrumbList"
|
:key="index">
|
<a
|
href="javascript:;"
|
@click="breadcrumbBtn(item, index)">{{ item.label }}</a>
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
<flexbox
|
v-for="(item, index) in showlist"
|
v-if="item.show"
|
:key="index"
|
class="stru-list">
|
<el-checkbox
|
v-model="item.isCheck"
|
:disabled="item.disabled"
|
class="stru-check"
|
@change="checkChange(item, index)"/>
|
<div
|
class="stru-name"
|
@click="enterChildren(item)">{{ item.name }}</div>
|
<div
|
v-if="item.children"
|
class="el-icon-arrow-right stru-enter"/>
|
</flexbox>
|
</div>
|
</div>
|
</template>
|
<script type="text/javascript">
|
// import { depList } from '@/api/common'
|
|
export default {
|
name: 'XhStructure', // 新建 structure
|
components: {},
|
props: {
|
value: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
/** 多选框 只能选一个 */
|
radio: {
|
type: Boolean,
|
default: false
|
},
|
/** 已选信息 */
|
selectedData: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data () {
|
return {
|
breadcrumbList: [], // 面包屑数据
|
selectItems: [], // 选择项
|
showlist: [], // 展示数据
|
loading: false, // 加载动画
|
searchInput: ''
|
}
|
},
|
computed: {},
|
watch: {},
|
mounted () {
|
this.selectItems = this.selectedData
|
// 部门列表数据
|
this.getStructureList()
|
},
|
methods: {
|
// 部门列表数据
|
getStructureList () {
|
this.loading = true
|
// depList({
|
// type: 'tree'
|
// })
|
// .then(res => {
|
// this.showlist = this.addIsCheckProp(res.data)
|
// this.breadcrumbList.push({ label: '全部', data: this.showlist })
|
|
// this.loading = false
|
// })
|
// .catch(() => {
|
// this.loading = false
|
// })
|
},
|
// 面包屑点击事件
|
breadcrumbBtn (item, index) {
|
if (this.radio && this.selectItems.length === 1) return
|
if (index + 1 <= this.breadcrumbList.length - 1) {
|
this.breadcrumbList.splice(index + 1, this.breadcrumbList.length - 1)
|
}
|
this.showlist = []
|
this.showlist = this.handelCheck(item.data)
|
},
|
// 点击checkbox选中
|
checkChange (item, aindex) {
|
this.$set(this.showlist, aindex, item)
|
var removeIndex = -1
|
for (let index = 0; index < this.selectItems.length; index++) {
|
const element = this.selectItems[index]
|
if (item.id === element.id) {
|
removeIndex = index
|
}
|
}
|
if (removeIndex === -1 && item.isCheck) {
|
this.selectItems.push(item)
|
} else if (removeIndex !== -1) {
|
this.selectItems.splice(removeIndex, 1)
|
}
|
|
/** 单选逻辑 */
|
if (this.radio) {
|
if (item.isCheck) {
|
this.showlist = this.showlist.map(function (element, index, array) {
|
if (element.id === item.id) {
|
element.disabled = false
|
} else {
|
element.disabled = true
|
}
|
return element
|
})
|
} else {
|
this.showlist = this.showlist.map(function (item, index, array) {
|
item.disabled = false
|
return item
|
})
|
}
|
}
|
|
this.$emit('changeCheckout', { data: this.selectItems })
|
},
|
/** 数据重新刷新时 循环标记展示数组 */
|
handelCheck (list) {
|
var self = this
|
list = list.map(function (item, index, array) {
|
item.isCheck = self.selectItemsHasItem(item)
|
return item
|
})
|
this.inputchange()
|
return list
|
},
|
selectItemsHasItem (item) {
|
if (this.selectItems.length === 0) {
|
return false
|
}
|
var hasItem = false
|
for (let index = 0; index < this.selectItems.length; index++) {
|
const element = this.selectItems[index]
|
if (item.id === element.id) {
|
hasItem = true
|
break
|
}
|
}
|
return hasItem
|
},
|
/** */
|
/** 点击进入子数组 */
|
enterChildren (item) {
|
// 保证单选环境下 没有选中 才可进入children
|
if (item.children && !(this.radio && this.selectItems.length === 1)) {
|
this.showlist = []
|
this.showlist = this.handelCheck(this.addIsCheckProp(item.children))
|
this.breadcrumbList.push({ label: item.label, data: this.showlist })
|
}
|
},
|
/** 给默认数据加isCheck属性 */
|
addIsCheckProp (list) {
|
if (list.length > 0) {
|
var item = list[0]
|
if (item.hasOwnProperty('isCheck')) {
|
return list
|
} else {
|
return list.map(function (item, index, array) {
|
item.disabled = false
|
item.isCheck = false
|
item.show = true
|
return item
|
})
|
}
|
}
|
return list
|
},
|
// 父组件 选中
|
parentRemoveCheck (data) {
|
this.selectItems = data.data
|
var temps = this.showlist
|
this.showlist = []
|
this.showlist = this.handelCheck(temps)
|
/** 单选逻辑 */
|
if (this.radio) {
|
this.showlist = this.showlist.map(function (item, index, array) {
|
item.disabled = false
|
return item
|
})
|
}
|
},
|
/** 搜索 */
|
inputchange (val) {
|
this.showlist = this.showlist.map(function (item, index, array) {
|
if (item.name.indexOf(val) !== -1) {
|
item.show = true
|
} else {
|
item.show = false
|
}
|
return item
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.search-list {
|
padding: 5px;
|
height: 248px;
|
overflow: auto;
|
}
|
.stru-list {
|
padding: 5px;
|
font-size: 13px;
|
.stru-check {
|
margin-right: 8px;
|
}
|
.stru-name {
|
flex: 1;
|
}
|
.stru-enter {
|
margin-right: 8px;
|
}
|
}
|
</style>
|
