2 changed files with 378 additions and 14 deletions
-
99src/views/archivesManage/archivesCheck/module/addCheck.vue
-
293src/views/components/TreeSelect.vue
@ -0,0 +1,293 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-show="isShowSelect" class="mask" @click="isShowSelect = !isShowSelect" /> |
||||
|
<el-popover |
||||
|
v-model="isShowSelect" |
||||
|
placement="bottom-start" |
||||
|
:width="width" |
||||
|
trigger="manual" |
||||
|
@hide="popoverHide" |
||||
|
> |
||||
|
<el-tree |
||||
|
ref="tree" |
||||
|
class="common-tree" |
||||
|
:style="style" |
||||
|
:data="data" |
||||
|
:props="defaultProps" |
||||
|
:show-checkbox="multiple" |
||||
|
:node-key="nodeKey" |
||||
|
:check-strictly="checkStrictly" |
||||
|
default-expand-all |
||||
|
:expand-on-click-node="false" |
||||
|
:check-on-click-node="multiple" |
||||
|
:highlight-current="true" |
||||
|
@node-click="handleNodeClick" |
||||
|
@check-change="handleCheckChange" |
||||
|
/> |
||||
|
<el-select |
||||
|
slot="reference" |
||||
|
ref="select" |
||||
|
v-model="selectedData" |
||||
|
:style="selectStyle" |
||||
|
:size="size" |
||||
|
:multiple="multiple" |
||||
|
:clearable="clearable" |
||||
|
:collapse-tags="collapseTags" |
||||
|
class="tree-select" |
||||
|
@click.native="isShowSelect = !isShowSelect" |
||||
|
@remove-tag="removeSelectedNodes" |
||||
|
@clear="removeSelectedNode" |
||||
|
@change="changeSelectedNodes" |
||||
|
> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-popover> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'TreeSelect', |
||||
|
props: { |
||||
|
// 树结构数据 |
||||
|
data: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
defaultProps: { |
||||
|
type: Object, |
||||
|
default() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
// 配置是否可多选 |
||||
|
multiple: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
// 配置是否可清空选择 |
||||
|
clearable: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
// 配置多选时是否将选中值按文字的形式展示 |
||||
|
collapseTags: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
nodeKey: { |
||||
|
type: String, |
||||
|
default() { |
||||
|
return 'id' |
||||
|
} |
||||
|
}, |
||||
|
// 显示复选框情况下，是否严格遵循父子不互相关联 |
||||
|
checkStrictly: { |
||||
|
type: Boolean, |
||||
|
default() { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
// 默认选中的节点key数组 |
||||
|
checkedKeys: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
size: { |
||||
|
type: String, |
||||
|
default() { |
||||
|
return 'small' |
||||
|
} |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number, |
||||
|
default() { |
||||
|
return 250 |
||||
|
} |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default() { |
||||
|
return 300 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isShowSelect: false, // 是否显示树状选择器 |
||||
|
options: [], |
||||
|
selectedData: [], // 选中的节点 |
||||
|
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;', |
||||
|
selectStyle: 'width:' + (this.width + 24) + 'px;', |
||||
|
checkedIds: [], |
||||
|
checkedData: [] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
isShowSelect(val) { |
||||
|
// 隐藏select自带的下拉框 |
||||
|
this.$refs.select.blur() |
||||
|
}, |
||||
|
checkedKeys(val) { |
||||
|
if (!val) return |
||||
|
this.checkedKeys = val |
||||
|
this.initCheckedData() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initCheckedData() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 单选时点击tree节点，设置select选项 |
||||
|
setSelectOption(node) { |
||||
|
const tmpMap = {} |
||||
|
tmpMap.value = node.key |
||||
|
tmpMap.label = node.label |
||||
|
this.options = [] |
||||
|
this.options.push(tmpMap) |
||||
|
this.selectedData = node.key |
||||
|
}, |
||||
|
// 单选，选中传进来的节点 |
||||
|
checkSelectedNode(checkedKeys) { |
||||
|
var item = checkedKeys[0] |
||||
|
this.$refs.tree.setCurrentKey(item) |
||||
|
var node = this.$refs.tree.getNode(item) |
||||
|
this.setSelectOption(node) |
||||
|
}, |
||||
|
// 多选，勾选上传进来的节点 |
||||
|
checkSelectedNodes(checkedKeys) { |
||||
|
this.$refs.tree.setCheckedKeys(checkedKeys) |
||||
|
}, |
||||
|
// 单选，清空选中 |
||||
|
clearSelectedNode() { |
||||
|
this.selectedData = '' |
||||
|
this.$refs.tree.setCurrentKey(null) |
||||
|
}, |
||||
|
// 多选，清空所有勾选 |
||||
|
clearSelectedNodes() { |
||||
|
var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据 |
||||
|
for (let i = 0; i < checkedKeys.length; i++) { |
||||
|
this.$refs.tree.setChecked(checkedKeys[i], false) |
||||
|
} |
||||
|
}, |
||||
|
initCheckedData() { |
||||
|
if (this.multiple) { |
||||
|
// 多选 |
||||
|
if (this.checkedKeys.length > 0) { |
||||
|
this.checkSelectedNodes(this.checkedKeys) |
||||
|
} else { |
||||
|
this.clearSelectedNodes() |
||||
|
} |
||||
|
} else { |
||||
|
// 单选 |
||||
|
if (this.checkedKeys.length > 0) { |
||||
|
this.checkSelectedNode(this.checkedKeys) |
||||
|
} else { |
||||
|
this.clearSelectedNode() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
popoverHide() { |
||||
|
if (this.multiple) { |
||||
|
this.checkedIds = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据 |
||||
|
this.checkedData = this.$refs.tree.getCheckedNodes() // 所有被选中的节点所组成的数组数据 |
||||
|
} else { |
||||
|
this.checkedIds = this.$refs.tree.getCurrentKey() |
||||
|
this.checkedData = this.$refs.tree.getCurrentNode() |
||||
|
} |
||||
|
this.$emit('popoverHide', this.checkedIds, this.checkedData) |
||||
|
}, |
||||
|
// 单选，节点被点击时的回调,返回被点击的节点数据 |
||||
|
handleNodeClick(data, node) { |
||||
|
if (!this.multiple) { |
||||
|
this.setSelectOption(node) |
||||
|
this.isShowSelect = !this.isShowSelect |
||||
|
this.$emit('change', this.selectedData) |
||||
|
} |
||||
|
}, |
||||
|
// 多选，节点勾选状态发生变化时的回调 |
||||
|
handleCheckChange() { |
||||
|
var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据 |
||||
|
this.options = checkedKeys.map((item) => { |
||||
|
var node = this.$refs.tree.getNode(item) // 所有被选中的节点对应的node |
||||
|
const tmpMap = {} |
||||
|
tmpMap.value = node.key |
||||
|
tmpMap.label = node.label |
||||
|
return tmpMap |
||||
|
}) |
||||
|
this.selectedData = this.options.map((item) => { |
||||
|
return item.value |
||||
|
}) |
||||
|
this.$emit('change', this.selectedData) |
||||
|
}, |
||||
|
// 多选,删除任一select选项的回调 |
||||
|
removeSelectedNodes(val) { |
||||
|
this.$refs.tree.setChecked(val, false) |
||||
|
var node = this.$refs.tree.getNode(val) |
||||
|
if (!this.checkStrictly && node.childNodes.length > 0) { |
||||
|
this.treeToList(node).map(item => { |
||||
|
if (item.childNodes.length <= 0) { |
||||
|
this.$refs.tree.setChecked(item, false) |
||||
|
} |
||||
|
}) |
||||
|
this.handleCheckChange() |
||||
|
} |
||||
|
this.$emit('change', this.selectedData) |
||||
|
}, |
||||
|
treeToList(tree) { |
||||
|
var queen = [] |
||||
|
var out = [] |
||||
|
queen = queen.concat(tree) |
||||
|
while (queen.length) { |
||||
|
var first = queen.shift() |
||||
|
if (first.childNodes) { |
||||
|
queen = queen.concat(first.childNodes) |
||||
|
} |
||||
|
out.push(first) |
||||
|
} |
||||
|
return out |
||||
|
}, |
||||
|
// 单选,清空select输入框的回调 |
||||
|
removeSelectedNode() { |
||||
|
this.clearSelectedNode() |
||||
|
this.$emit('change', this.selectedData) |
||||
|
}, |
||||
|
// 选中的select选项改变的回调 |
||||
|
changeSelectedNodes(selectedData) { |
||||
|
// 多选,清空select输入框时，清除树勾选 |
||||
|
if (this.multiple && selectedData.length <= 0) { |
||||
|
this.clearSelectedNodes() |
||||
|
} |
||||
|
this.$emit('change', this.selectedData) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.mask{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
opacity: 0; |
||||
|
z-index: 11; |
||||
|
} |
||||
|
.common-tree{ |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.tree-select{ |
||||
|
z-index: 111; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue